Toggle Tabs Group

Overview

This group includes a tab-like UI component for showing and hiding blocks.

Structure

  • This Group toggleTabsGroup has a data type of text. It stores the name of the current tab that the user is viewing. It includes all of the tabs that a user can click on. Each tab group (e.g., Group Nav 1 tab -) has a data type of text and contains the name of the tab. Clicking on tab group will toggle to a different tab (you will have to determine which group to show).

How to set up

  • Update the data source of each of the tab groups (e.g., Group Nav 1 tab - , Group Nav 2 tab -, etc.) and update the group's text

  • Set Button tab item to reference parent group's text:uppercase.

  • Resize the tab groups to ensure the full text is visible.

  • Add new blocks using the extension

    • The new blocks should have 'This element is visible on page load' unchecked and 'Collapse this element's height when hidden' checked.

How to show a tab

  • Add the following conditional statement to the block you want to display for each tab:

    • Example for tab 1: If Group toggleTabsGroup's text is Group Nav 1 tab -'s text or GrouptoggleTabsGroup's text is empty then this group is visible

    • Example for tab 2: If Group toggleTabsGroup's text is Group Nav 2 tab -'s text then this group is visible

    • Example for tab 3: If Group toggleTabsGroup's text is Group Nav 3 tab -'s text then this group is visible

Last updated