How to Show and Hide Elements on Button Click in GoHighLevel

If you are moving from ClickUp style task toggles to interactive website behavior, learning how to show and hide sections on a button click in GoHighLevel is essential. This guide walks you step by step through setting up buttons that reveal or hide content on your funnels and websites using only the built-in tools from the GoHighLevel builder.

The method below is based strictly on the official GoHighLevel knowledge base instructions and uses the native advanced settings available on each element. There is no need to add custom code or external scripts.

Understanding the GoHighLevel Show/Hide Behavior

In GoHighLevel funnels and websites, every element has advanced settings that control when and how it is displayed. By linking the display of one element to an action performed on another element, you can create a simple show/hide toggle. Most commonly, this is done with a button that reveals hidden content.

This behavior relies on three key concepts:

Assigning a custom ID to the element you want to show or hide
Choosing an appropriate display type for that element (block, flex, grid, etc.)
Linking a button or another element to that ID through its Action settings

Step-by-Step: Prepare the Element in GoHighLevel

Begin by preparing the content you want to toggle. This could be a section, row, column, form, image, FAQ block, or any other element available in the GoHighLevel page builder.

1. Select the Element to Be Shown or Hidden

Open your funnel or website page in the GoHighLevel builder.
Click the element that you want to show or hide when a button is clicked.
Make sure the element is clearly visible while you configure it so you can preview the final effect.

2. Open Advanced Settings in GoHighLevel

With the element selected, look to the right-hand settings panel.
Click the Advanced tab.
Locate the section labeled Custom ID or similar, depending on the current interface version of GoHighLevel.

The Advanced tab is where you will define the unique identifier that the button will use to reference this element.

3. Set a Custom ID for the Element

In the Custom ID field, enter a short, unique value such as faq-box-1 or bonus-content.
Avoid spaces and special characters. Use only letters, numbers, hyphens, or underscores.
Remember this exact ID, as you will need it when configuring the button later.

This custom ID is what allows GoHighLevel to connect the button click to the correct element on the page.

4. Choose the Display Type

In the same Advanced tab, find the Display or Display Type setting.
Select the display mode that matches how you want the element to appear when it is visible, such as:

Block – for full-width sections or text areas
Flex – for flexbox-based layouts
Inline-block – for smaller items in line with other content

The element will be hidden initially, but this display value determines how it will render once the show action is triggered in GoHighLevel.

Configure the Button Action in GoHighLevel

Once the target element has a custom ID and display type, you can configure a button (or any clickable element) to show or hide it. The next steps take place on the button itself.

5. Add or Select the Button

In the GoHighLevel builder, add a new button to your page or select an existing one.
Place the button close to the content it will control so users understand the connection.
Update the button text to something descriptive, such as “Show More Details” or “Reveal Bonus Section.”

6. Open Button Action Settings

With the button selected, go to the right-hand settings panel.
Click on the Settings or Button tab, then find the Action or On Click section.
This section controls what happens when the button is clicked in GoHighLevel.

7. Link the Button to the Target Element

In the button Action dropdown, choose the option that allows you to show or hide an element by ID. In the official GoHighLevel documentation, this is presented as part of the element action system.
Enter the exact custom ID of the element you configured earlier.
Confirm that the show/hide mode is set as needed (for example, show on first click, hide on second click if a toggle behavior is supported by the current GoHighLevel version).

If you mistype the ID or add extra spaces, the button will not affect the target element, so double-check the spelling.

Preview and Test in GoHighLevel

After configuring both the controlled element and the button, you should thoroughly test the interaction inside GoHighLevel and in a live browser preview.

8. Use the Preview Mode

Click Save in the top right of the GoHighLevel builder.
Select Preview to open the page in a new tab.
Scroll to the button and click it.

When you click the button, the element with the matching custom ID should appear or disappear depending on how the show/hide behavior is configured.

9. Test on Different Devices

Use the device icons in the builder to check the layout for desktop, tablet, and mobile.
Confirm that:

The button is easy to tap or click.
The revealed content fits within the screen without breaking your GoHighLevel layout.
Any padding or margin on the revealed element still looks correct.

Fine-tune spacing, fonts, and sizes as needed so the show/hide interaction feels smooth on all devices.

Practical Use Cases for GoHighLevel Show/Hide

Using show and hide behavior in GoHighLevel funnels and websites helps you organize content and improve conversions without overwhelming visitors. Common use cases include:

FAQs: Show answers only when the user clicks a question.
Feature comparison: Reveal advanced details on button click.
Bonus content: Hide bonus sections until a user interacts.
Form expansion: Show extra fields only when needed.

All of these can be implemented using the same core steps: assign a custom ID, choose display type, and connect a button through its action settings in GoHighLevel.

Tips and Best Practices for GoHighLevel Show/Hide

Use clear labels: Make button text obvious so users know what will appear.
Group related content: Place hidden content logically close to the trigger button.
Limit nested toggles: Too many nested show/hide elements can confuse visitors.
Stay consistent: Use the same style and behavior across your GoHighLevel pages.

Following these tips will keep the user experience clean and aligned with high-converting funnel design standards.

Where to Learn More About GoHighLevel

You can find the official step-by-step instructions for this feature in the GoHighLevel support article on hiding and showing elements on button click here: Official GoHighLevel Show/Hide Documentation. For broader strategy, funnel optimization, and marketing automation guidance around GoHighLevel, you can also explore expert resources at Consultevo.

By combining the built-in show/hide capabilities with smart design and testing, you can create dynamic, interactive GoHighLevel funnels and websites that keep visitors focused and more likely to convert.

Need Help With ClickUp?

If you want expert help building, automating, or scaling your GHL , work with ConsultEvo — trusted GoHighLevel Partners.

Scale GoHighLevel

“`

GoHighLevel Show Hide Elements Guide