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

# Toggle Tabs Page

## Overview

Standard one column page layout where multiple blocks 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 blocks.

## Structure

* When this page is added to your app, it will come with two main groups:
  * **Blocks container 860 (do not rename)**\
    This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
  * **Group Main toggle tabs** \
    This group contains the toggle tabs UI and logic.
    * In the workflows tab, you will see a custom workflow called **Navigate**. This custom workflow has a parameter for `text` and whenever you trigger this workflow you should past `Parent group's text`. 

![](/files/-MT0hZvrNzrGIVoIS923)

* This page comes with one popup:
  * **Popup Hidden Variables** contains two groups:
    * **var - Website object**\
      This group stores the website object (e.g., app name, primary color, and etc.)
    * **var - dummy data**\
      A placeholder group in case you want to use any hidden variable groups later.
    * **var - tab url parameter**\
      This group stores the toggle tab text (name) of the tab that the user is currently viewing.

![](/files/-LobrYG1_-LsA16tv-No)

* This page will come with one reusable element:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)

## How to set up

* Remove (**Group Nav 1 tab -**, **Group Nav 2 tab -**, **Group Nav 3 tab -**, or **Group Nav 4 tab -**) or add additional toggle tabs 

{% hint style="info" %}
If you add additional tabs, please remember to update the group's text
{% endhint %}

* Resize **Blocks container 860 (do not rename)** and add other blocks inside of it
  * By default, the blocks should be hidden on page load (uncheck the box for *This element is visible on page load* for each block)
    * Check the box for *Collapse this element's height when hidden*

![](/files/-LcmERi_fxV9hJ_0K2iR)

* To show or hide block, add conditional statements to each module:
  * For the first block, add the conditional statement
    * *Group Nav 1 Tab's Text is var - tab url parameter's text then This element is visible*
  * For blocks after the first block, add the following conditional statement:
    * *Group Nav 2 Tab's Text is var - tab url parameter's text*

       *then This element is visible*
    * *Group Nav 3 Tab's Text is var - tab url parameter's text*

       *then This element is visible*
    * and so on..<br>