Toggle Tabs Group
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
textand 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