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