Hide Page Section When it contains an empty CMS List

Community resources Webflow Tips
#1

If you have a heading or some other content around a CMS list on a page - you may not want to display any of it if the CMS list is empty. The below piece of code will hide the page section if it’s empty. From my memory, it also works if used to hide a slide containing an empty lists.

    <script>
        // HIDE SECTION WHEN EMPTY
        // $(".page-section").has(".w-dyn-empty").css("display", "none");
    </script>

It does not work when there is a slider element within but will work with the below piece of code - set overflow for the section to “hidden”:

    <script>
        // HIDE SECTION WHEN EMPTY
        // $(".page-section").has(".w-dyn-empty").css("height", "0");
    </script>
8 Likes
#2

Hello @Diarmuid_Sexton,

I think you can do this already on webflow under settings you can select conditional visibility of CMS elements.

#3

I think the idea of @Diarmuid_Sexton is to be able to hide stuff conditionally even on static pages which embark a collection list.
Otherwise the conditional visibility built in webflow works on cms pages directly.

1 Like
#4

Ye, what @pepperclip said.

@Pablo_Cortes You can’t always hide CMS list with conditional availability.

#5

I got it now @pepperclip and @Diarmuid_Sexton. Thanks for sharing this Diarmuid!

#6

Question about this. Would it work if the CMS list is not in a section on its own, but there’s several CMS lists inside of a section and I want to hide only the ones that are empty?

Further explanation: I have a CMS page with tabs. Inside one of the tabs, I have several CMS lists stacked in different divs filtered for different articles in the website based on regions of the world (one page for each region). I’m trying to hide the empty CMS lists so the mission is to hide the divs of those CMS lists that display no content due to the filter when you change from one CMS page to another. I hope I’m making sense.

Is it possible?

Please let me know if I’m over-complicating things and there’s an easier way to do this.

Thanks!

#7

Yes, that’s the very same as the code above - just change the".page-section" to the name of the div’s that the list are contained within.

1 Like
#8

Sounds great, thank you for clarifying. Should I copy and paste the code several times and change the “.page-section” for each div? I’m not very good at coding so when it comes to custom, well, I gotta ask.

#9

Depends onhow many class names there are.

And, use it as an opportunity to learn. jsfiddle is a good playground for figuring these things out.

Good luck.

#11

I’ve got the same problem with hiding empty CMS sections, but the code above doesn’t seem to be working.

I’ve got a CMS template page that has a different number of CMS items on three different pages across a number of sections, but I’m struggling to hide the empty sections.

Here’s my link:
https://preview.webflow.com/preview/leftside-8bb25c-af8caf3ec9fae6ad126f?utm_medium=preview_link&utm_source=designer&utm_content=leftside-8bb25c-af8caf3ec9fae6ad126f&preview=11be52c84a7e03ec9b38c8e4a9c5aac2&pageId=5fb7e3dae5d47aa353b234c7&itemId=5fb7e493b32e87bbed9aacd1&mode=preview

If this doesn’t take you to the right page, it’s the ‘Artists’ page and then either ‘Charlie Gray’ or ‘Tariq Howes’ - I’m trying to hide the empty .Project-Section-Artists and .100vh-Section-Artists

Any help would be really appreciated.
Thanks

#12

Thank you! I used this in my non webflow site.

#13

This works AMAZING and was exactly what I needed! Thank you!

#14

It solved my problem. Thanks @Diarmuid_Sexton