> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/modules/toggle-tabs-group.md).

# 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

![](/files/-MUjFSmjy_ziQFefDZYb)

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

![](/files/-MUjFlch12VJg6oZ_WYi)

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

![](/files/-MUjHGBUjYlKKBHKSO3Z)

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

![](/files/-MUjKOn6IUyEqxkRqyaB)