> 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/master-1/pages/toggle-tabs-page.md).

# Toggle Tabs Page

## Overview

Standard one column page layout where multiple modules can be stacked on top of each other (they should not be overlapping). This page includes a tab-like UI component for showing and hiding modules.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-LclihxeC_wrq14szpRd%2FScreen%20Shot%202019-04-18%20at%2011.34.37%20AM.png?alt=media\&token=a11e2839-b2c9-4cc3-a3c8-fc552ef6efda)

## Structure

* When this page is added to your app, it will come with two main groups:
  * `Group page860Group` - This group contains the responsive settings for all modules. All modules should be placed into this group.
  * `Group Toggles` - This group contains the toggle tabs UI and logic.
    * In the workflows tab, you will see a custom workflow called `Set tab state`. This custom workflow has a parameter for `number` and whenever you trigger this workflow you should pass an integer for tab number (e.g, 1, 2, or 3).

![](/files/-LclmBwMBPKSVM490L__)

![](/files/-LcloMW5dO9mBJBDyK7y)

* This page will come with a `Popup Hidden Variables`. For more information on how to use the `Popup Hidden Variables`, [click here](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup).
  * `var - Website object` - This group stores the website object (e.g., app name, primary color, and etc.)
  * `var - toggle tabs` - This group stores the toggle tab number (1,2,3) of the tab that the user is currently viewing.
  * `var - dummy` - This is a placeholder group. You can store any data here by updating the type of content and data source of the group.

![](/files/-Lclk6llOXX9e7s854Re)

* This page will also come with two reusable elements: [`header A`](https://docs.airdev.co/canvas/assets/reuseables/header) and [`footer`](https://docs.airdev.co/canvas/assets/reuseables/footer).

## How to set up

* Remove (`Button Tab 1`, `Button Tab 2`, or `Button Tab 3`) or add additional toggle tabs 

![](/files/-Lcm8drdugk6BM1fkPfU)

{% hint style="info" %}
If you add additional button tabs, please remember to update the conditional statement (when *var - toggle tab's number is X* then change the Button Tab's background color)
{% endhint %}

![](/files/-LcmCh0M3_PYDaV1W2K7)

* Resize `Group page860Group` and add other modules inside of it
  * By default, the modules should be hidden on page load (uncheck the box for `This element is visible on page load` for each module)
    * Check the box for `Collapse this element's height when hidden`

![](/files/-LcmERi_fxV9hJ_0K2iR)

* To show or hide modules, add conditional statements to each module:
  * For the first module, add the conditional statement
    * `var - toggle tab's number is empty or var - toggle tab's number is 1`then `This element is visible`
  * For modules after the first module, add the following conditional statement:
    * `var - toggle tab's number is 2` then `This element is visible`
    * `var - toggle tab's number is 3` then `This element is visible`
    * and so on..