Toggle Tabs Group
Last updated
Last updated
This group includes a tab-like UI component for showing and hiding blocks.
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).
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.
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