" %}
Cloneable
{% endembed %}
## Getting Started
### STEP 1 - Add the Library
First, **add the library** as detailed in [Quick Start](https://attr.sygnal.com/sa5-html/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
{% hint style="success" %}
In both solutions, if ALL of the collection lists within the attribute-tagged section are empty, the entire section will be hidden.
{% endhint %}
### `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.
{% hint style="info" %}
**Hide** mode is CSS-based- however it is dynamic and will work with Finsweet's CMS filter.
{% endhint %}
### `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.
{% hint style="info" %}
**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.
{% endhint %}
### 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()](https://caniuse.com/css-has) or CSS [:not()](https://caniuse.com/mdn-css_selectors_not). |
## Technical Notes
**Hide** mode is 100% CSS-based, and leverages the `:has()` pseudoselector. However this CSS feature is not yet [supported](https://caniuse.com/css-has) by all browsers, most notably Firefox. If you need 100% browser coverage, you should use our **Suppress** mode until Firefox implements :has fully.
{% hint style="info" %}
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.
{% endhint %}