How can Webflow hide a page section when a CMS list is empty?

To hide a page section when a CMS list is empty in Webflow, you can use conditional visibility settings combined with some custom code. Here's a step-by-step guide on how to achieve this:

Step 1: Add a CMS collection list to your page where you want to conditionally hide the section when the list is empty.

Step 2: Select the section you want to hide and open the settings panel.

Step 3: Under the Settings tab, scroll down to the Visibility section and click on the "Add Conditional Visibility" button.

Step 4: In the conditional visibility panel, click on the first dropdown and select the CMS collection list you added earlier.

Step 5: Set the condition to "is empty". This condition will check if there are no items in the CMS collection list.

Step 6: Save the conditional visibility settings.

Step 7: By default, Webflow only hides elements visually but still renders them in the HTML. To completely hide the section when it's empty, we'll need to add some custom code.

Step 8: Go to the Page Settings by clicking on the gear icon in the top-right corner of the Designer.

Step 9: In the Custom Code tab, add the following code snippet within the `` tags:

```html

```

Step 10: Save the changes.

Step 11: Now, return to your page and select the section you want to hide.

Step 12: In the Settings panel, under the Class dropdown, give the section a unique class name like "empty-section".

Step 13: Save your changes and publish/update your site.

With these steps, the section you specified will be hidden from view whenever the CMS collection list is empty. The custom code snippet added in the Page Settings ensures that the section is completely hidden in the HTML code as well.