Buy Us a Beer!Community ForumMicro-Consulting

Hide Section w/ Empty Collection Lists ❺

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

In page designs, there is often a need for an entire section to completely disappear when it has no CMS data to show.

Consider this section;

DIV - News Section
  Heading - "Recent news"
  Collection List - News, filtered to past 30 days

Webflow offers a "no items found" state for the collection list itself- however in this case, when there is no recent news to show, we may want the entire section to simply disappear.

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

Use Cases

  • News sections

  • Alerts bars

  • Popup special

  • Finsweet filtered views

  • etc.

Demonstration

LogoHide-Empty-Collection-Lists
Demonstration
LogoWebflow Smart Elements - WebflowWebflow Smart Elements
Cloneable

Getting Started

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Add the Attributes

Apply either wfu-hide or wfu-suppress to the sections you want to hide.

See below for the differences, and usage details.

Usage Notes

We have two slightly different solutions here, depending on your needs.

  • wfu-hide - Hides the section when all collection lists within it are empty

  • wfu-suppress - Removes the section when all collection lists within it are empty

In both solutions, if ALL of the collection lists within the attribute-tagged section are empty, the entire section will be hidden.

wfu-hide = empty lists

Hides the section when all collection lists within it are empty.

Add this attribute directly to the section you want hidden.

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

wfu-suppress = empty lists

Removes the section when all collection lists within it are empty.

Add this attribute directly to the section you want suppressed.

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.

What's the Difference?

Here are the differences between the two attributes.

wfu-hide
wfu-suppress

How it works

Hides the section the attribute is on, using CSS display: none.

Removes the section entirely.

Browser support

All browsers, including newer versions of Firefox since early 2024

All browsers

Compatibility with Finsweet Attributes like FS Load & FS Filter

Compatible; can dynamically adapt to changing conditions of the list content after the page has loaded and filter settings are changed.

Not compatible, runs once at page load and will permanently remove the section.

Which should I choose?

In general, we recommend that you use wfu-hide.

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.

Use wfu-suppress if you need to support older versions of Firefox, or other browsers that do not support CSS :has() or CSS :not().

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.

Last updated

Was this helpful?