How can I hide an entire section in Webflow when a dynamic list is empty? I found a previous post that was somewhat helpful, but I need further clarification.

To hide an entire section in Webflow when a Collection List is empty, you can use Webflow’s built-in conditional visibility combined with minimal custom code.

1. Wrap the Section with a Specific Class

• Apply a custom class to the section or div block that contains the Collection List (e.g., section-articles).
• This wrapper section will be targeted by custom code if the dynamic list is empty.

2. Identify the Collection List Wrapper

• Click on the Collection List Wrapper and give it a unique class—for example, articles-wrapper.
• This is the element Webflow repeats for each item; you’ll check whether it exists on page load.

3. Add Custom Code to Check for Items

• Go to Page Settings → Before tag and add a short script to detect whether the Collection List has any items.

• Use a script like this:

• Check if there are zero .articles-wrapper elements inside .section-articles; if so, hide the section.

  Example (no HTML tag shown per guidelines):

  • You can write:
    document.addEventListener("DOMContentLoaded", function() { if (document.querySelectorAll(".articles-wrapper").length === 0) { document.querySelector(".section-articles").style.display = "none"; } });

• This code waits until the DOM is loaded, checks if any dynamic items are rendered, and hides the section if none are found.

4. Publish the Site to See Results

• Custom code doesn't render in preview mode, so be sure to publish your site to test whether the section disappears when the Collection is empty.

Summary

To hide a Webflow section when a dynamic list is empty, wrap it in a section with a unique class (e.g., section-articles), apply a class to the Collection List (e.g., articles-wrapper), and use simple JavaScript to hide the wrapper if no items exist. Always publish to test since custom code doesn’t run in preview mode.