Hide and Show Elements on Button Click in Funnels & Websites
The button action of Show Elements and Hide Elements allow you to present and remove content based on user interaction with buttons.
The video above shows how to show elements on button click, but the process is much the same for hiding elements on button click, you just will want to keep those elements visible instead of hiding them to start.
- Ensure that the element(s) that you want to hide or show upon button click are built out and visible on your page. You can show or hide elements, columns, rows and sections.
The first thing to do is to rename your elements, columns, rows and sections that you are going to hide or show so that they are easy to find in the list. If you are hiding elements on button click, proceed to step 4, otherwise, continue to step 3.
If you are going to show elements on click, you need to hide the elements so that there is something to show. Then click on the container of the elements you want to show and from the right hand options panel click Advanced and toggle off the visibility on desktop and mobile so that the icons are gray.
- Click on the button in the builder whose action is going to be to show or hide the elements.
From the right hand panel, scroll down to button actions and click the "Link To" dropdown and select Hide Elements or Show Elements depending on which you are working towards.
Click the No Elements text to open the selection window. Find the elements that you named earlier and click the boxes next to those element names to select them for action on button click.
- Save your changes and publish to view them on the live site.
