Can the section in my Webflow Home page, where a CMS collection of events is displayed, be automatically hidden when there are no events?

Yes, you can automatically hide a section containing a CMS Collection List in Webflow when there are no items (e.g., no events in your CMS). This requires a simple setup using Webflow’s built-in conditional visibility or a lightweight custom solution.

1. Use Conditional Visibility Inside the Collection List

• Webflow’s native conditional visibility only works on elements inside a Collection List, not the entire section—so you can’t directly hide the section when the list is empty.
• You can, however, conditionally hide messaging (like “No events” text) inside the list, but not the empty section itself.

2. Use JavaScript to Hide the Section If No Items Are Found

To actually hide the entire section when there are no CMS items, you’ll need a small JavaScript snippet:

• Add a custom embed inside your page (preferably right before the </body> in Page Settings > Custom Code > Footer Code).
• Use JavaScript to check if the Collection List has child elements (i.e., CMS items).
• If there are none, hide the parent container (section).

Here’s how to do it:

• Give your Collection List Wrapper a unique class (e.g., .events-list).

• Give the section that wraps the collection list a class like .events-section.

• Add this code in Page Settings > Footer Code:

  (Note: Replace the class names with those you're using in Webflow)

  `Webflow.ready(function() {
  if (document.querySelectorAll('.events-list .w-dyn-item').length === 0) {
  document.querySelector('.events-section').style.display = 'none';
  }
  });`

• This script waits for the CMS items to load and hides the section if none exist.

3. Alternative: Hide the Section Using Finsweet's CMS Library

• You can also use Finsweet's CMS Library (https://cmsdocs.webflow.io/)
• It has a utility method that allows you to check for empty CMS lists and perform actions such as hiding their parent containers.
• For example: fs-cmsfilter“empty-state-action=”remove” can be applied in custom implementations.

Summary

Webflow doesn’t natively allow conditional visibility on entire sections based on CMS data, but you can hide a section if the CMS Collection is empty using simple JavaScript. Just target the collection and its parent section, and hide accordingly when no .w-dyn-item exists.