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.
Go to "Sites" > "Funnels/Websites" > Choose the Funnel or Website > "Edit" > "Button Element" > Show/Hide Elements on Button Click
![](https://staticfiles.gleap.io/ghelparticle/eKs1AyBbCkgSoxCjlPZe7VhyNx349wh8BYxtFoXytDkmJwuHI7FzwtleQ7vdQ2Y4FkGI53v234d.png)
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.
![](https://staticfiles.gleap.io/ghelparticle/ZhzYkkv8TiE9ygu27bem8BgqQWeZ1Wua5uGtQdU363F91xiynG5EzMOA3wux3lXB4G3Xsm9kFs1.png)
2. On the right side of the screen, you'll find the element settings. Under " General" , scroll all the way down to "Button Actions".
![](https://staticfiles.gleap.io/ghelparticle/DJ7hcslvq7GA9akF2toA8CGu0gqPDaDtmXv8WCws8P168trmQ5ZjGRgxy9OfpmDqxdnGNnbxI2R.png)
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.
![](https://staticfiles.gleap.io/ghelparticle/AdjVMyXP8SG5xDbkRbvn1745lqbdKIAqm5R0vtp47u8OgZlO0EphGIynvGhzkmPLssA2QL826WC.png)
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.
![](https://staticfiles.gleap.io/ghelparticle/kYXEaHTKKkvGiuqHaz1hptAZKtltvxaIqsEMOT39TdWMuvdy2TvVT1tBWH95jvtK3E4kvGJlX7H.png)
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.
![](https://staticfiles.gleap.io/ghelparticle/YZlm1VjNY9EP7bPpecLLaVStgY335ABQBpVfDvCbUEBms6XD68pLjGQGY4YzJDmjR5QYwv5mokw.png)
2. Locate the " Visibility" section. Click on each mobile and desktop visibility buttons to "hide" the elements in both views.
![](https://staticfiles.gleap.io/ghelparticle/UCmJrelo28uO0XUXcTqfcIiyjhitgG1z3O34xcgSUwwvHsPa847bWsklBbRKdJ2QSvZM9BvxAi9.png)
3. In the funnel or website builder, choose the " Button element" that you want to reveal the hidden element when clicked.
![](https://staticfiles.gleap.io/ghelparticle/idLBkf0zpFwb7faMEYaA2nPK00KzyMnooZI408kOy2taJdoaDxv7696vGpx3XitcN0muXEHZOtO.png)
4. On the right side you'll find the element settings. Under " General" , scroll down to "Button Actions".
![](https://staticfiles.gleap.io/ghelparticle/boS9d0XldP7B87JUYa0mzuckdi7ty5jmtsaMuJ1sFf8s1a3bA5NJcsE3NBRm4zCMcTjfG8AVWWW.png)
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.
![](https://staticfiles.gleap.io/ghelparticle/po5Ch325ZdIjAQiYzpxo4nZXefNgVgiUG79ygEaBrmG4ulyOqLanaVzdzZU3YAp0VAoMm4CW3qr.png)
Helpful Tip:
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.