Show and Hide Elements with a Button

A button can reveal hidden content or hide something on the page when clicked, such as a pricing table, an FAQ answer or a form. It works on both desktop and mobile.

Hide elements on click

  1. Select the button in the builder.
  2. Under General, scroll to Button Actions and set Link To to Hide & Show Elements.
  3. Click Hide Elements and choose what to hide. You can pick an element, section, column or row.
  4. Save or Preview to test.

Show elements on click

An element can only be revealed if it starts out hidden.

  1. Select the element you want revealed.
  2. Open the Styles tab and scroll to Visibility.
  3. Click both the desktop and mobile visibility icons so they turn gray (hidden).
  4. Select your button and set Link To to Hide & Show Elements.
  5. Click Show Elements and pick the hidden items.
  6. Save and preview.

If the Show Elements list is empty, no element has been hidden yet.

Edit hidden items

If something is hidden on both views, you cannot click it on the canvas. Open the Layers panel to select and edit it.

Ideas

  • A "See details" button that opens a hidden section.
  • A form that appears after clicking "Get a quote".
  • Swap an offer banner for a thank-you message.

Good to know: Name your sections clearly in Layers so hidden items are easy to find later.

Was this article helpful?