Can the section in my Webflow Home page, where a CMS collection of events is displayed, be automatically hidden when there are no events?
- Place your CMS Events inside a Collection List and wrap it in a Div Block as the Events section container.
- Add custom JavaScript via an Embed element to detect if
.w-dyn-itemexists, and hide the wrapper div if no items are found.
Yes, you can automatically hide the section on your Webflow homepage when there are no CMS events using Webflow’s built-in “Conditional Visibility” feature. Here’s how to do it:
1. Use a Collection List Wrapper for Events
- Ensure your Events are inside a Collection List. Drag in a Collection List and connect it to your Events CMS collection.
- Place all event-related content (text, images, links) inside this Collection List.
2. Wrap the Events Section in a Div Block
- Wrap your Collection List with a new Div Block that serves as the container for the entire Events section.
- Label this Div (e.g., “Events Section Wrapper”) for easy identification.
3. Add Conditional Visibility to the Wrapper
- Webflow’s Designer doesn’t support conditional visibility on the entire section based on collection count directly.
- So, use a third-party workaround: Insert a conditionally-hidden “Reference Switch” element inside the CMS list, and use JavaScript to hide the parent if no items exist.
4. Add a Custom Embed to Detect Empty State
Add a small Embed component below the Collection List (but inside the Events section container).
Use JavaScript to check if the Collection List is empty:
Example (inline reference only):
Useloading="lazy"on your embed and script that checks whether the number of.w-dyn-iteminside the.w-dyn-listis zero, then apply.style.display = 'none'to the containing div.Example logic:
Check if
.w-dyn-itemexistsIf no items, set the wrapper div’s display to
none
5. Test in Published Mode
- Publish your site (Webflow scripts run only on published sites).
- Open your homepage where no events exist and verify that the section is hidden.
Summary
Use a combination of Webflow’s Collection List and a custom script to detect when no CMS items are rendered, then hide the entire Events section container dynamically. This ensures a clean homepage without empty sections when there are no events.