> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/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/5.2/canvas-library/popups/toggle-tabs-popup.md).

# Toggle Tabs Popup

## Overview

![](/files/80WbTlDJMWvT8osJj8Nl)

Tab-like UI component for showing and hiding groups and tabs in a popup.

## Structure

This popup includes the following:

* **Group Main tabs\_text** has a data source of type text. The tab that the user is currently viewing will be saved in this group.
  * **Group Nav 1 tab -** holds tab 1's text name
    * Clicking **Button TAB ITEM 1** will display **Group Nav 1 tab's** text in **Group Main tabs\_text** 
  * **Group Nav 2 tab -** holds tab 2's text name
    * Clicking **Button TAB ITEM 2** will display **Group Nav 2 tab's** text in **Group Main tabs\_text** 
* Clicking on **Group close (toggle tabs popup)**, **Button Cancel**, and **Button Save changes** will close the popup
* **RepeatingGroup Dummy** displays a list of things

## How to set up

* Update the tab names in **Group Nav 1 tab** and **Group Nav 2 tab.** Resize Button Tab items 1 & 2 and the their parent groups accordingly.
* Add or remove elements in **Group Main tab 1 content** and **Group Main tab 2 content**
* Update the data source of **RepeatingGroup Dummy**
* Update the text elements and inputs data sources
* Add a workflow to **Button Save changes**
* Add a workflow on the page to show **Popup toggleTabsPopup**