{"id":1831,"date":"2026-03-31T11:36:58","date_gmt":"2026-03-31T11:36:58","guid":{"rendered":"https:\/\/onesystemcrm.com\/help\/?post_type=docs&p=1831"},"modified":"2026-03-31T12:41:55","modified_gmt":"2026-03-31T12:41:55","password":"","slug":"hide-and-show-elements-on-button-click-funnels-websites","status":"publish","type":"docs","link":"https:\/\/onesystemcrm.com\/help\/docs\/hide-and-show-elements-on-button-click-funnels-websites\/","title":{"rendered":"Hide and Show Elements on Button Click (Funnels & Websites)"},"content":{"rendered":"

Overview of Hide\/Show Elements on Button Click<\/span><\/strong><\/h2>\n

Users can add an interactive layer to their designs by hiding or revealing hidden elements upon a click event. This functionality enhances user engagement and allows for more dynamic and user-friendly page interaction.<\/p>\n

<\/p>\n

\n

How to Hide Elements on a Button Click<\/span><\/strong><\/h2>\n

Add an interactive layer to designs by hiding elements when a button is clicked.\u00a0 Important:<\/strong> In order to show an element, that element must first be hidden. If no elements are shown in the Show Elements dropdown<\/strong>, you must first hide an element.<\/span><\/p>\n

Step 1:<\/strong>\u00a0Choose the Button<\/u><\/h4>\n

In the funnel or website builder, choose the\u00a0Button<\/strong>\u00a0element that you want to use.<\/p>\n

<\/p>\n

Step 2:\u00a0<\/strong>Navigate to Button Actions<\/u><\/h4>\n

On the right side of the screen, you’ll find the element settings. Under\u00a0General<\/strong>, scroll all the way down to\u00a0Button Actions.<\/strong><\/p>\n

In the Link To dropdown, select\u00a0Hide & Show Elements<\/strong><\/p>\n

<\/p>\n

Step 3:\u00a0<\/strong>Select Element to Hide<\/u><\/h4>\n

Click\u00a0Hide Elements\u00a0<\/strong>to open a dropdown listing all elements in the site page. Choose the element or elements that you’d like to hide when the button is clicked. You can choose an element, a section, a column, or column rows.<\/p>\n

<\/p>\n

Step 4:<\/strong>\u00a0Save Changes<\/u><\/h4>\n

Once done choosing which ones to hide, click the\u00a0Save<\/strong>\u00a0button to save your changes or the\u00a0Preview<\/strong>\u00a0button to preview and test your funnel or website.<\/p>\n

<\/p>\n

\n

How to Show Elements on a Button Click<\/span><\/strong><\/h2>\n

Similarly, you can reveal hidden elements when a button is clicked.<\/p>\n

Step 1:<\/strong>\u00a0Select Element to be Hidden<\/u><\/h4>\n

Select an element you want to “Show” from a “Hidden” state. In the left-side settings, navigate to the\u00a0Styles\u00a0<\/strong>tab then scroll down to\u00a0Visibility.<\/strong><\/p>\n

<\/p>\n

Step 2:<\/strong>\u00a0Hide Element<\/u><\/h4>\n

Click on each mobile and desktop visibility buttons to “hide” the elements in both views. When hidden, the icons will show as gray.<\/p>\n

<\/p>\n

Step 3:<\/strong>\u00a0Choose the Button<\/u><\/h4>\n

In the funnel or website builder, choose the\u00a0Button<\/strong>\u00a0element that you want to use.<\/p>\n

<\/p>\n

Step 4:\u00a0<\/strong>Navigate to Button Actions<\/u><\/h4>\n

On the right side of the screen, you’ll find the element settings. Under General, scroll all the way down to\u00a0Button Actions.<\/strong><\/p>\n

In the Link To dropdown, select\u00a0Hide & Show Elements.<\/strong><\/p>\n

<\/p>\n

<\/h4>\n

<\/h4>\n

Step 5:\u00a0<\/strong>Select Element to Show<\/u><\/h4>\n

Click\u00a0Show Elements\u00a0<\/strong>to open a dropdown listing all hidden elements in the site page. Choose the element or elements that you’d like to show when the button is clicked. You can choose an element, a section, a column, or column rows.<\/p>\n

Note<\/strong>: If no elements are shown in the Show Elements dropdown<\/strong>, you must first hide an element.<\/span><\/pre>\n
<\/p>\n
Step 6:<\/strong>\u00a0Save Changes<\/u><\/h4>\n
Once done choosing which ones to hide, click the\u00a0Save<\/strong>\u00a0button to save your changes or the\u00a0Preview<\/strong>\u00a0button to preview and test your funnel or website.<\/p>\n
<\/p>\n
\n
Editing Hidden Elements<\/strong><\/h2>\n
If you’ve accidentally hidden an element from both desktop and mobile views, you won\u2019t be able to see or click it on the canvas\u2014but you can still access and edit it using the Layers panel in the builder.<\/p>\n
    \n
  1. \n
    Open the Layers Panel <\/strong>In the top left of the Funnel or Website Builder, click the Layers<\/strong> icon (stacked layers). This will open a list of all the elements in your section\/page, including hidden ones.<\/p>\n<\/li>\n
  2. \n
    Find the Hidden Element <\/strong>Scroll through the list to locate the element you hid. It may appear dimmed or with an “eye” icon indicating it\u2019s not visible on either view.<\/p>\n<\/li>\n
  3. \n
    Select the Element <\/strong>Click the element’s name in the list to select it. The element will now be highlighted in the builder, and its settings panel will appear.<\/p>\n<\/li>\n
  4. \n
    Restore Visibility <\/strong>With the element selected, click the\u00a0visibility toggle (eye icon)<\/strong> in the top bar to turn it back on for desktop and\/or mobile.<\/p>\n<\/li>\n<\/ol>\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Overview of Hide\/Show Elements on Button Click Users can add an interactive layer to their designs by hiding or revealing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[86],"doc_tag":[],"class_list":["post-1831","docs","type-docs","status-publish","hentry","doc_category-funnels-and-websites"],"year_month":"2026-09","word_count":614,"total_views":"43","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"usamasaeed219","author_nicename":"usamasaeed219","author_url":"https:\/\/onesystemcrm.com\/help\/author\/usamasaeed219\/"},"doc_category_info":[{"term_name":"Funnels and Websites","term_url":"https:\/\/onesystemcrm.com\/help\/docs-category\/funnels-and-websites\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/comments?post=1831"}],"version-history":[{"count":1,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1831\/revisions"}],"predecessor-version":[{"id":1832,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1831\/revisions\/1832"}],"wp:attachment":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/media?parent=1831"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_category?post=1831"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_tag?post=1831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}