# Creating a Tabbed Interface

You can implement a tabbed interface within the details block of your integration to better organize information.  To start, you will setup the tab structure in your handlebars template.  For this example we will create two tabs called `Info` and `Comments`.

{% code title="template.hbs" %}

```markup
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link href="#">
            Comments
        </a>
    </li>
</ul>
```

{% endcode %}

{% hint style="info" %}
The HTML structure for the tabs makes use of Bootstrap tabs. You can find more information here <https://getbootstrap.com/docs/4.1/components/navs/#tabs>
{% endhint %}

Now that our tabs are in place we will need to trigger an action when the tab is clicked.  We will trigger an action called `changeTab` and pass the name of the tab that we want to change to.

{% code title="template.hbs" %}

```markup
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a {{action "changeTab" "info"}} class="nav-link" href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a {{action "changeTab" "comments"}} class="nav-link" href="#">
            Comments
        </a>
    </li>
</ul>
```

{% endcode %}

The action itself will be implemented in the `actions` hash of our component file.  The action when called will set a variable called `activeTab` to the tab that was clicked on.  We also initialize the `activeTab` variable to the name of the tab we want to start as active.

```javascript
polarity.export = PolarityComponent.extend({
    activeTab: 'info',
    actions: {
        changeTab: function(tabName) {
          this.set('activeTab', tabName);
        }
    }
})
```

We can now use the `activeTab` variable in our handlebars template to set the `active` class on the tab that is currently active.

{% code title="template.hbs" %}

```markup
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a {{action "changeTab" "info"}} class="nav-link {{if (eq activeTab "info") "active"}}" href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a {{action "changeTab" "comments"}} class="nav-link {{if (eq activeTab "comments") "active"}}" href="#">
            Comments
        </a>
    </li>
</ul>
```

{% endcode %}

We're making use of the `eq` [truth helper](/integrations/build-an-integration/customizing-the-overlay-window/templates/built-in-helpers.md#truth-helpers) to set the `active` class when the `activeTab` variable is equal to our tab name.

Finally, we use conditionals to only show content when the appropriate tab is active.

{% code title="template.hbs" %}

```markup
{{#if (eq activeTab "info")}}
    <h1>Info</h1>
{{/if}}
{{#if (eq activeTab "comments")}}
    <h1>Comments</h1>
{{/if}}
```

{% endcode %}

When the user clicks on the "Info" tab, it triggers the `changeTab` action which will set the `activeTab` to the value `info`.  This in turn will show the content within the "Info" conditional block.  Likewise, when the user clicks on the "Comments" tab the `activeTab` value will be set to `comments` and the "Comments" tab content will be shown.


---

# 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.polarity.io/integrations/recipes/creating-a-tabbed-interface.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.