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 modified 2yr ago