Skip to main content
All CollectionsTutorials
How to Show or Hide Containers, Sections, Columns or Widgets with Dynamic Visibility
How to Show or Hide Containers, Sections, Columns or Widgets with Dynamic Visibility

Learn how to show or hide any section, column, widgets & elements using event triggers.

Updated over a week ago

In order to show or hide any section/column/element, you can use a Dynamic visibility event trigger. Follow along to see in action how you can toggle show/hide an element.

To demonstrate, below you can see what we are going to achieve with this tutorial(with the click of a button we will show/hide the section).

To start with, Enable "Events" trigger under the visibility tab of your section, and Keep HTML to Yes and Display mode to "show"

Note: Display mode can be set to hide if you want to hide a section when an event is triggered, and Logical connectives can be set to show/hide a section by multiple triggers.

Click the Events option tab. You can select any event trigger option from the list, for this tutorial the "click" event is selected.

The trigger for this element should be the element you want to act as the display/hide trigger for this section, for example #showcoffee. You can also target a child element, for example #showcoffee a.

Choose the animation for your trigger from the "Show Animation" dropdown. Lets use Fade animation.

You can also hide other elements on the page when the event is triggered. e.g. #coffeeimage or .coffeeimage.

Toggle: Set to “yes” if you want the event trigger to show or hide this element.

Fallback: you can optionally show content when the event is not triggered.

In the last but essential step, add an event trigger element, it can be any element. In this guide, will use a button.

  • Click on the Button

  • Click on Advanced > CSS ID and set your ID e.g. showcoffee (which we used in the trigger element in events tab.)

Did this answer your question?