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

<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?

Let’s Build Something Cool Together!

Hide Container

Required attributes

Optional Attributes

Working examples

Information

Contact me