# 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

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MUjEsdUfNFvqKBqneCD%2F-MUjFSmjy_ziQFefDZYb%2FScreen%20Shot%202021-03-01%20at%2011.26.30%20AM.png?alt=media\&token=e1efa283-e5c0-4bc6-bbf7-090ace3d6e1e)

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

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MUjEsdUfNFvqKBqneCD%2F-MUjFlch12VJg6oZ_WYi%2FScreen%20Shot%202021-03-01%20at%2011.27.53%20AM.png?alt=media\&token=55470eac-608b-4e67-b229-f2ead2985d2c)

* 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.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MUjEsdUfNFvqKBqneCD%2F-MUjHGBUjYlKKBHKSO3Z%2FScreen%20Shot%202021-03-01%20at%2011.33.49%20AM.png?alt=media\&token=4586050a-68c6-4dda-8345-bbd2dd3c31d1)

## 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*

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MUjEsdUfNFvqKBqneCD%2F-MUjKOn6IUyEqxkRqyaB%2FScreen%20Shot%202021-03-01%20at%2011.48.06%20AM.png?alt=media\&token=11d96c2f-2822-490d-a30e-2bb566cdce25)