Hide and Show Elements on Button Click (Funnels & Websites)

SEARCH OUR BLOG

CATEGORIES

Categories

FOLLOW US

Introducing a powerful enhancement to our platform with the addition of the “Show/Hide Elements on Click” feature. This new button action empowers users to dynamically hide or reveal hidden elements on both mobile and desktop views, providing greater flexibility and interactivity in designing and presenting content.

Covered in this article:



How it Works

Users can add an interactive layer to their designs by hiding or revealing hidden elements upon a click event. This functionality enhances user engagement and allows for more dynamic and user-friendly page interaction.


Sites > Funnels/Websites > Choose the Funnel or Website > Edit > Button Element > Show/Hide Elements on Button Click


GHvFa800a2sgDhIy2 DyynGFwuhNtjPSSQ


Hiding Elements

Add an interactive layer to designs by hiding elements when a button is clicked. 

1. In the funnel or website builder, choose the Button element that you want to use.

KijaZkEKtqUXbYLE PHdV0MKwlFiNlIwUg


2. On the right side of the screen, you’ll find the element settings. Under General, scroll all the way down to “Button Actions“.

mJVrFwrovyuJsqFoevUX AjihOg3FVX uw

3. Choose “Hide Elements” from the dropdown. Click on the button that says “No Elements” and choose the element or elements that you’d like to hide when the button is clicked. 

KZ6sJ B8KNoSxr

4. You can choose an element, a section, a column, or column rows. Once done choosing which ones to hide, click the Save button, and preview your funnel or website to test.

 


Showing Elements

Similarly, you can reveal hidden elements when a button is clicked.

1. Select an element you want to “Show” from a “Hidden” state and go to Advanced Settings. For this example, we will be using a Form to be revealed when a button is clicked.

1um8IlPU sr0A4hKQOwsT0mR

2. Locate the Visibility section. Click on each mobile and desktop visibility buttons to “hide” the elements in both views.

3. In the funnel or website builder, choose the Button element that you want to reveal the hidden element  when clicked.

KijaZkEKtqUXbYLE PHdV0MKwlFiNlIwUg


4. On the right side you’ll find the element settings. Under General, scroll down to “Button Actions“.

mJVrFwrovyuJsqFoevUX AjihOg3FVX uw

5. Choose “Show Elements” from the dropdown. Click the “No Elements” button and choose the element or elements that you’d like to show when the the button is clicked. 

gSOa3tS4rP6K3LR3SlBbqKp6D8PKY7RjGA


Helpful Tip

Name your element/s with an identifying label so it's easier to find them from the list.


6. Once you have chosen which element/s to show when the button is clicked, click the Save button, and preview your funnel or website to test.