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’ll need to use the Empty State settings available within the Collection List element.

1. Add a Section and a Collection List

• Drag in a Section and place it where you want your dynamic content to appear.
• Inside that Section, add a Collection List Wrapper and connect it to the desired CMS Collection.

2. Set Up an Empty State

• With the Collection List selected, go to the Element Settings Panel (D key).
• Scroll to the Empty State section.
• Click "Add Empty State", which creates a div that appears when there are no collection items.

3. Hide the Entire Section via Empty State

• Select the Empty State element (not the Collection List, but the new empty wrapper that appears).
• Instead of styling this message, set the Visibility of your parent Section to Display: None while the Empty State is showing.
• You’ll need to use a bit of custom code for this, since Webflow does not natively hide parent elements from children logic.

4. Add Custom Code to Hide the Section

• Assign a class or ID to the main Section that wraps your Collection List (e.g., section-to-hide).

• Publish your site and add this code in the Page Settings under the Before tag custom code section:

  Example (no raw code formatting used here):

  Use a basic script:
  <script>
const emptyState = document.querySelector('.w-dyn-empty');
if (emptyState) {
const section = document.querySelector('.section-to-hide');
if (section) section.style.display = "none";
}
</script>

• Adjust the class selectors as needed to match your Webflow project.

Summary

To hide a section when a Webflow Collection List is empty, add and detect the Empty State and apply a small script to remove the entire section from view. Webflow doesn't natively allow hiding parent elements based on children's state, so a simple custom script bridges that gap.