Streaming live at 10am (PST)

Hide Page Section When it contains an empty CMS List

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>
1 Like

Hello @Diarmuid_Sexton,

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

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.

Ye, what @pepperclip said.

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

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

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!

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

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.

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.