Back to all resources
dynamic content
visibility toggle

Hide element if collection is empty

By Corey Moen
This JavaScript code snippet provides two options for conditionally hiding an HTML element based on the presence or state of another element in a webpage using jQuery.


Option 1

This option checks if there is an empty element within a container with the ID LIST-WRAPPER. Specifically, it looks for a div with the class w-dyn-empty. If such an element exists, indicating that the dynamic content expected in the list is absent, it hides another element with the ID SECTION.

Option 2

This option checks if the element with the ID LIST-WRAPPER has a class w-condition-invisible. This class typically indicates that the element is intentionally hidden, likely due to conditional logic that evaluates the contents of the list as being empty or not meeting certain criteria. If this class is present, the script hides the element with the ID SECTION.

Both options are encapsulated within jQuery's $(function() {...}) to ensure they run once the DOM is fully loaded, making the script safe to use in the head of an HTML document without waiting for the rest of the page's content to load.