" %}
Cloneable
{% endembed %}
## Getting Started
### STEP 1 - Add the Library
First, **add the library** as detailed in [Quick Start](/sa5-html/quick-start.md).
### 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://attr.sygnal.com/sa5-html/hide-section-w-empty-collection-lists.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.