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

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-LclmBwMBPKSVM490L__%2FScreen%20Shot%202019-04-18%20at%2011.49.50%20AM.png?alt=media\&token=fb000245-765b-483a-bdb7-33361c808974)

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-LcloMW5dO9mBJBDyK7y%2FScreen%20Shot%202019-04-18%20at%2011.59.20%20AM.png?alt=media\&token=ff54a9d0-9a64-4077-8be6-4d2a1d105200)

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

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-Lclk6llOXX9e7s854Re%2FScreen%20Shot%202019-04-18%20at%2011.40.47%20AM.png?alt=media\&token=224693c6-c5ca-458f-8898-a98e502e7f5a)

* 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 

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-Lcm8drdugk6BM1fkPfU%2FScreen%20Shot%202019-04-18%20at%201.32.13%20PM.png?alt=media\&token=84621378-a0a9-4e37-90c6-97ac247b7bcc)

{% 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 %}

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-LcmCh0M3_PYDaV1W2K7%2FScreen%20Shot%202019-04-18%20at%201.50.04%20PM.png?alt=media\&token=bae8d0cb-55ca-4d43-94d9-1e1475c5fced)

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

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LclhFljCbaC3zcSJIGH%2F-LcmERi_fxV9hJ_0K2iR%2FScreen%20Shot%202018-10-09%20at%202.21.27%20PM.png?alt=media\&token=244ced31-cef1-4010-97d0-9486bc3b3157)

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