BLOCKS

Toggle Tabs Page

Overview

Standard one column page layout where multiple blocks can be stacked on top of each other (they should not be overlapping). This page includes a tab-like UI component for showing and hiding blocks.

Structure

  • When this page is added to your app, it will come with two main groups:

    • Blocks container 860 (do not rename) This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.

    • Group Main toggle tabs This group contains the toggle tabs UI and logic.

      • In the workflows tab, you will see a custom workflow called Navigate. This custom workflow has a parameter for text and whenever you trigger this workflow you should past Parent group's text.

  • This page comes with one popup:

    • Popup Hidden Variables contains two groups:

      • var - Website object This group stores the website object (e.g., app name, primary color, and etc.)

      • var - dummy data A placeholder group in case you want to use any hidden variable groups later.

      • var - tab url parameter This group stores the toggle tab text (name) of the tab that the user is currently viewing.

  • This page will come with one reusable element:

How to set up

  • Remove (Group Nav 1 tab -, Group Nav 2 tab -, Group Nav 3 tab -, or Group Nav 4 tab -) or add additional toggle tabs

If you add additional tabs, please remember to update the group's text

  • Resize Blocks container 860 (do not rename) and add other blocks inside of it

    • By default, the blocks should be hidden on page load (uncheck the box for This element is visible on page load for each block)

      • Check the box for Collapse this element's height when hidden

  • To show or hide block, add conditional statements to each module:

    • For the first block, add the conditional statement

      • Group Nav 1 Tab's Text is var - tab url parameter's text then This element is visible

    • For blocks after the first block, add the following conditional statement:

      • Group Nav 2 Tab's Text is var - tab url parameter's text

        then This element is visible

      • Group Nav 3 Tab's Text is var - tab url parameter's text

        then This element is visible

      • and so on..