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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/2.0.0/modules/toggle-tabs-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.