How Hide & Show Elements Works
The Hide & Show Elements button action can perform two different actions:
Hide Elements: Hides elements that are currently visible.
Show Elements: Reveals elements that were already hidden through their Visibility settings.
An element must already be hidden before it can be selected under Show Elements.
If Show Elements does not contain any selectable elements, first hide the element from both desktop and mobile views using its Visibility settings.
How to Hide Elements When a Button Is Clicked
Use Hide Elements when you want currently visible content to disappear after a visitor clicks a button.
Step 1: Select the Button
Open the website or funnel page in the builder.
Select the Button element that should trigger the action.
Confirm that the Button settings panel opens on the right side of the builder.
Step 2: Set the Button Action to Hide & Show Elements
In the Button settings panel, open the General tab.
Scroll to Button Actions.
Open the Link To dropdown.
Select Hide & Show Elements.
Step 3: Choose the Elements to Hide
Under Button Actions, select Hide Elements.
Choose the page elements that should disappear when the button is clicked.
Select all applicable elements before closing the selector.
The available selections can include individual elements, sections, columns, or rows.
If Hide Elements displays No Elements, no elements have been selected for the button to hide.
Step 4: Save and Test the Hide Action
After selecting the elements to hide:
Click the Save icon to save the page.
Click the Preview icon to open the page preview.
Click the configured button in the preview.
Confirm that the selected elements disappear.
The Hide Elements field displays the number of selected elements after the configuration has been made.
How to Show a Hidden Element When a Button Is Clicked
Use Show Elements when you want content that starts hidden to become visible after a visitor clicks a button. The element must first be hidden in its Visibility settings before it can be selected under Show Elements.
Step 1: Select the Element That Should Start Hidden
Select the element that should appear only after the button is clicked.
Open the element's Styles tab.
Scroll to the Visibility section.
Step 2: Hide the Element on Desktop and Mobile
In the Visibility section, disable the element for both device views:
Disable Desktop visibility.
Disable Mobile visibility.
Confirm that both device states indicate the element is hidden.
An element that remains visible on either device type may not behave as expected when used with the Show Elements button action.
Step 3: Select the Button That Will Reveal the Element
Select the Button element that visitors will click.
Confirm that the Button settings panel opens on the right.
Step 4: Select Hide & Show Elements as the Button Action
Open the Button's General settings.
Scroll to Button Actions.
Open the Link To dropdown.
Select Hide & Show Elements.
Step 5: Choose the Hidden Element to Show
Select Show Elements.
Choose the hidden element or elements that should become visible after the button is clicked.
The available selections can include hidden elements, sections, columns, or rows.
If Show Elements displays No Elements, Kyrios does not currently detect an eligible hidden element. Return to the element's Styles > Visibility settings and hide it from both desktop and mobile views before trying again.
Step 6: Save and Test the Show Action
After selecting the elements to show:
Click the Save icon.
Click the Preview icon.
Confirm that the target element is hidden when the page first loads.
Click the configured button.
Confirm that the hidden element appears.
The Show Elements field displays the number of selected elements after the configuration has been made.
How to Edit an Element Hidden on Both Desktop and Mobile
An element hidden from both desktop and mobile may no longer be selectable directly from the page canvas. The element can still be accessed through the Layers panel.
Open and Select the Hidden Element
Click the Layers icon in the upper-left area of the builder.
Expand the page structure until you locate the hidden element.
Select the element by name in the Layers panel.
Edit its settings from the element settings panel.
Hidden elements remain listed in Layers even when they cannot be clicked on the page canvas.
Restore the Element's Visibility
After selecting the hidden element through Layers:
Open its Styles settings.
Locate Visibility.
Re-enable the element for desktop, mobile, or both as needed.
Save the page.
Restoring visibility makes the element available normally on the corresponding device view.
Common Issues and Fixes
Show Elements says "No Elements"
Cause: No eligible element has been hidden.
Fix: Select the element you want to reveal, open Styles > Visibility, and hide it from both desktop and mobile. Then return to the button's Show Elements selector.
I cannot find the hidden element on the page
Cause: The element is hidden from both desktop and mobile views, so it cannot be selected directly from the canvas.
Fix: Open the Layers panel and select the hidden element from the page structure.
Clicking the button does not hide the expected content
Cause: The intended element may not be selected under Hide Elements.
Fix: Select the button, open General > Button Actions, confirm Hide & Show Elements is selected, and verify the correct elements appear under Hide Elements.
Clicking the button does not reveal the hidden content
Cause: The target element may not be hidden correctly or may not be selected under Show Elements.
Fix: Confirm the target element is hidden through Styles > Visibility for both desktop and mobile, then verify that it is selected under the button's Show Elements setting.
The changes work in the builder but not in testing
Cause: The page may not have been saved before testing.
Fix: Save the page, open Preview, and test the button again from the preview experience.