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!