Hide Container

Yes we all know that Webflow has its "Empty" stage for CMS lists in case there's nothing in them, but sometimes you don't want an empty list, there are cases when we just need to get rid of the whole section if there's nothing in them. Well if that's your case this module is for you!

Loads
CDN ScriptDocumentationExample

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

<!-- [Webflow Trickery by CodeRaccoons]  -->
<script async src= "https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebflowTrickery@1.0.0/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.

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?

Working examples

Need more?

Do you need multiple instances of this Attribute?

All of our attributes follow the same structure for multiple instances!

In order to use multiple instances on an attribute add -n at the end of the value of the element attribute. being "n" a unique number.

This unique number is how we can tell between multiple instances.

For example, container-2, trigger-2, and target-2 will all be connected to the same instance.

This is what you need to add multiple instances of this:

First attribute instance
wt-hidecontainer-element="container"
Second instance
wt-hidecontainer-element="container-2"
Third instance
wt-hidecontainer-element="container-3"