Hide Section w/ Empty Collection Lists ❺

Hide an entire section when the collection lists in it are empty

Suppose you have an area of your page called “alerts” and it has some nice styling and icons… but sometimes, there are no alerts to show. How do you make the whole thing disappear when there are no alerts in the Collection List for display?

This solution provides two simple attributes-based methods to do just that.

Demonstration

Hide-Empty-Collection-Lists

Demonstration

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

Usage Notes

We have two slightly different solutions here, depending on your needs. In both solutions, if ALL of the collection lists within the attribute-tagged section are empty, the entire section will be hidden.

Click the toggle next to the solution you want.

If you want a solution that works with all browsers, use the suppress feature.

I want to SUPPRESS a section whose collection lists are all empty

To the section you want to hide, add the custom attribute;

wfu-suppress = empty-lists

If you need a solution that is dynamic, and can respond to changes after the page has loaded - such as those made by Finsweet's CMS Filter - use this solution. However the CSS technique used here is not supported by Firefox.

I want to HIDE a section whose collection lists are all empty

To the section you want to hide, add the custom attribute;

wfu-hide = empty-lists

To recap;

Hide mode is CSS-based and will not work with Firefox- however it is dynamic and will work with Finsweet's CMS filter.

Suppress mode is JS-based and will work with all browsers- however it executes at page load time, and will not respond to dynamic list changes after the page has loaded.

Technical Notes

Hide mode is 100% CSS-based, and leverages the :has() pseudoselector. However this CSS feature is not yet supported by all browsers, most notably Firefox. If you need 100% browser coverage, you should use our Suppress mode until Firefox implements :has fully.

As of Aug-2023, Firefox has about 7% desktop share, but almost 0% mobile. If your site primarily targets mobile users, Firefox's lack of support for CSS :has will not affect you.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply wfu-hide or wfu-suppress to the sections you want to hide

See above for details.