--- title: "Show/Hide Contents on Button Click" slug: "show-hide-contents-on-button-click" description: "Learn how to use ClickFunnels' Show/Hide feature to create dynamic pages with collapsible sections and toggles for hidden content effortlessly." tags: ["button", "editor"] updated: 2025-06-24T14:05:50Z published: 2025-06-24T14:05:50Z canonical: "support.myclickfunnels.com/show-hide-contents-on-button-click" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Show/Hide Contents on Button Click The **Show/Hide** button action in ClickFunnels allows you to create dynamic pages by showing or hiding content when a button is clicked. This is a fantastic tool for creating collapsible sections and toggles for hidden content. Let’s walk through the steps to effectively use the **Show/Hide** action in the Button element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/button show hide.gif) --- ## Requirements - An active ClickFunnels account - A page created in your workspace --- ## Step 1: Add Contents to Show or Hide - You can add **Sections**, **Rows**, or individual **Elements** to your page that you want to show or hide. - Multiple items can be selected for the Show or Hide action. For example: - Show a hidden paragraph and an image simultaneously. - Hide a section and the button itself at the same time. - Add all the content you want to control with the button before proceeding to the next step. --- ## Step 2: Rename Your Content Title for Easy Identification Rename the container (Section, Row, or Element) you plan to show or hide. This will help you easily identify them when setting up the button actions. To rename: 1. Hover over the container (Section, Row, Flex, or Element). 2. Click the **Code Icon (<>)** to access the container CSS settings. The code icon is available in all the containers, such as section, row, flex, and element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(382).png) 3. Change the name to something meaningful, like “Hidden Paragraph” or “Show-Image.” Clear and meaningful names make selecting the correct content in the button settings easier. 4. Click **Update** to apply the name of the container. --- ## Step 3: Hide the Show Contents To make the Show/Hide action work as intended, the content you want to reveal **must be hidden** by default. This ensures that the button click will display the hidden content, creating the desired effect. Typically, you’ll hide content like paragraphs, images, or sections that provide additional information users can access on demand. #### How to hide the content: 1. Open the **Settings** of the content (Section, Row, or Element) you want to hide. 2. Click the **Eye** 👁️ **Icon** to hide the content by default. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(383).png) 3. Confirm that the content is no longer visible on the page when previewed. It will remain hidden until the button triggers it. --- ## Step 4: Configure the Button’s Show/Hide Actions Now, it’s time to configure the Button Element to control the visibility of your content. #### How to Set Up the Button: 1. In the page editor, click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 2. From the **Form** category, select the **Button** element. 3. Open the **Button Settings** and locate the **Button Action** section. 4. Set the Button Action to **Show/Hide**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(384).png) #### How to Select Sections/Rows/Elements for Show/Hide: - **Show Field**: - Select the content (Section, Row, or Element) you want to display when clicking the button. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(386).png) - Make sure these are the contents you hid in Step 3. - You can select multiple items to show simultaneously. - **Hide Field**: - Select the content (Section, Row, or Element) you want to hide when clicking the button. - This can include: - Other visible elements need to disappear when clicking. - The button itself can be selected to create a “disappearing button” effect. #### Final Touches: - Save your changes after configuring the button actions. - Test your page to ensure the Show/Hide actions work as intended. > [!NOTE] > **Note:** > > You can configure the button to either **show** or **hide** content independently. It is not mandatory to configure both the "Show" and "Hide" actions simultaneously. For example, you can choose to only show content without hiding anything, or vice versa. ## Related - [Enabling Scroll to Specific Content on Click](/enabling-scroll-to-specific-content-on-click.md) - [Button: Allow Users to Submit Actions](/button-allow-users-to-submit-actions.md) - [Setting Up Actions for Buttons, Text, and Images in ClickFunnels](/setting-up-actions-for-buttons-text-and-images.md) - [Getting Started with Styles](/getting-started-with-styles.md)