How can Webflow hide a page section when a CMS list is empty?
TL;DR
- Use Conditional Visibility on the CMS Collection List to hide empty items, wrapping it in a Div Block and applying the same settings.
- Optionally, use JavaScript in the Page Settings for advanced control over the visibility based on CMS list content.
When working with Webflow, you might need to hide a page section if a CMS list is empty. Here's how you can achieve this using Webflow's features:
1. Use Conditional Visibility Setting
- Add a CMS Collection List to your page layout if you haven't already.
- Select the Collection List element in your designer.
- In the Element Settings panel, locate the Conditional Visibility option.
- Set a condition to check if a certain field in your CMS item is set or empty. For instance, set visibility based on a field like "Post Title" or "Image URL" not being empty.
2. Adjust the Wrapper Element
- Wrap your CMS List in a Div Block or any container element if it's not wrapped already. This will help apply visibility settings not just to the list but its entire section.
- Select the Div Block (or wrapper) containing the CMS List.
- Apply Conditional Visibility to the wrapper as well, using the settings from the previous step.
3. Supplement with Custom Code (Optional)
- If the above steps don't fully meet your needs, a little custom code might be necessary. Use JavaScript to check if the CMS list rendered is empty and toggle the visibility of the parent container.
- Insert the code in the Page Settings under before </body> custom code section.
Summary
To hide a page section when a CMS list is empty in Webflow, ensure your CMS List and its wrapper have Conditional Visibility settings applied. Optionally use JavaScript for more complex scenarios.
