Skip to main content

Show/Hide Elements on Button Click in Stack Funnels & Websites

Enhance your Stack funnels and websites with the interactive "Show/Hide Elements on Click" feature. This functionality allows you to dynamically hide or reveal elements, creating a more engaging and flexible user experience across both mobile and desktop views.

Table of Contents​

How it Works​

With Stack, you can add an interactive layer to your designs by setting up elements to hide or reveal when a button is clicked. This feature enhances user engagement and allows for a more dynamic interaction on your pages.

  • Go to Sites > Funnels/Websites
  • Choose the Funnel or Website you want to edit
  • Select Edit
  • Navigate to the Button Element
  • Use the Show/Hide Elements on Button Click feature

Hiding Elements​

Add interactivity by hiding elements when a button is clicked. Follow these steps:

  1. In the funnel or website builder, select the Button Element you wish to use.
  2. On the right side of the screen, locate the element settings. Under General, scroll down to Button Actions.
  3. From the dropdown, select Hide Elements. Click on the button labeled No Elements and choose the element(s) you want to hide when the button is clicked.
  4. You can choose to hide an element, a section, a column, or column rows. Once you've made your selections, click Save and preview your funnel or website to test the changes.

Showing Elements​

Reveal hidden elements with a button click by following these steps:

  1. Select the element you want to "Show" from a "Hidden" state. For instance, you might want to reveal a form.

  2. In the Advanced Settings, locate the Visibility section. Ensure the elements are hidden in both mobile and desktop views by clicking the visibility buttons.

  3. In the funnel or website builder, select the Button Element that will reveal the hidden element when clicked.

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

  5. Choose Show Elements from the dropdown. Click the No Elements button and select the element(s) you want to show when the button is clicked.

    Helpful Tip: Name your elements with identifiable labels to easily locate them in the list.

  6. After selecting the elements to show, click Save and preview your funnel or website to test the functionality.

Editing Hidden Elements​

If you've hidden an element from both desktop and mobile views and need to edit it, you can access it through the Layers panel in the builder.

Accessing Hidden Elements​

  1. Open the Layers Panel by clicking the Layers icon (stacked layers) in the top left of the Funnel or Website Builder. This displays a list of all elements on your page, including hidden ones.
  2. Scroll through the list to find the hidden element. It may appear dimmed or with an "eye" icon indicating it's not visible.
  3. Click the element's name to select it. The element will be highlighted in the builder, and its settings panel will appear.
  4. To restore visibility, click the visibility toggle (eye icon) in the top bar to make it visible on desktop and/or mobile views.

By using these features, you can create a more interactive and engaging experience for your users on Stack.