Hide Container

Automatically hide CMS list containers when no items are present, keeping your design clean and efficient.

Copy the Hide Container <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Hide Container -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/HideContainer.min.js" ></script>
Copy Script

Required attributes

I want this container to be hidden if the collection inside of it is empty.
Attribute to add
Name
wt-hidecontainer-element
Value
container
Instructions

This attribute will define what should be hidden when the collection list is empty.

The element can be a section, container, the collection list wrapper, anything we don't want to show when the collection list is empty.

the collection list MUST be a child element of this element.

How does it look?
I want to look for the contents within this "Collection List"
Attribute to add
Name
wt-hidecontainer-element
Value
list
Instructions

This attribute will be checking whether or not the collection list is empty, in case it is it will hide the section completely.

the collection list MUST be a child of the element with the wt-hidecontainer-element="container" attribute.

How does it look?

Optional Attributes

I want this container to be hidden if the collection inside of it is empty.
Attribute to add
Name
wt-hidecontainer-element
Value
container
Instructions

This attribute will define what should be hidden when the collection list is empty.

The element can be a section, container, the collection list wrapper, anything we don't want to show when the collection list is empty.

the collection list MUST be a child element of this element.

Where?
This attribute should be added to the element that will be hidden if the collection is empty, can be only the wrapper or a whole section, and anything in between
How does it look?
I want to look for the contents within this "Collection List"
Attribute to add
Name
wt-hidecontainer-element
Value
list
Instructions

This attribute will be checking whether or not the collection list is empty, in case it is it will hide the section completely.

the collection list MUST be a child of the element with the wt-hidecontainer-element="container" attribute.

Where?
This attribute should be added to the collection list's empty state block that we will be checking.
How does it look?

Working examples