Tabs

Tabs

Display long content blocks in a tabbed interface for enhanced readability.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Tab documentation.

Overview

Tabs in markdown use a combination of markdown and HTML. The scenario keyword for Id's can be changed to anything, as long as it is consistent. It is important to note that if more than one tabbed interface is present on the page, they can not share the same Id's. Doing so will result in the tabs not working correctly.

Tabs in Markdown (with Anchor Navigation)

By default, when a user clicks on a tab, the url will be appended with the hash so that it can be copied and navigated to. On load, this link will open the selected tab and scroll to it. Click a tab in the example below and inspect the url to see it change.

Scenario 1

Scenario 2

Scenario 3

Markdown + HTML


<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="scenario-one-tab" data-bs-toggle="tab" href="#scenario-one" role="tab" aria-controls="scenario-one" aria-selected="true">Scenario 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="scenario-two-tab" data-bs-toggle="tab" href="#scenario-two" role="tab" aria-controls="scenario-two" aria-selected="false">Scenario 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="scenario-three-tab" data-bs-toggle="tab" href="#scenario-three" role="tab" aria-controls="scenario-three" aria-selected="false">Scenario 3</a>
    </li>
</ul>
 
::::{.tab-content .text-bg-body-secondary .p-3 .mb-3 .border-start .border-end .border-bottom .rounded-bottom}
:::{.tab-pane .fade .show .active #scenario-one role=tabpanel aria-labelledby=scenario-one-tab}
Scenario 1 Content
:::
:::{.tab-pane .fade #scenario-two role=tabpanel aria-labelledby=scenario-two-tab}
Scenario 2 Content
:::
:::{.tab-pane .fade #scenario-three role=tabpanel aria-labelledby=scenario-three-tab}
Scenario 3 Content
:::
::::

Tabs in Markdown (without Anchor Navigation)

Sometimes, we do not want tabs to be navigatable. To do this, add the class d-hash-none to the <a> element as seen in the example below. Click a tab in the example below and notice the hash in the url does not change.

Scenario 4

Scenario 5

Scenario 6

Markdown + HTML


<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active d-hash-none" id="scenario-four-tab" data-bs-toggle="tab" href="#scenario-four" role="tab" aria-controls="scenario-four" aria-selected="true">Scenario 4</a>
    </li>
    <li class="nav-item">
        <a class="nav-link d-hash-none" id="scenario-five-tab" data-bs-toggle="tab" href="#scenario-five" role="tab" aria-controls="scenario-five" aria-selected="false">Scenario 5</a>
    </li>
    <li class="nav-item">
        <a class="nav-link d-hash-none" id="scenario-six-tab" data-bs-toggle="tab" href="#scenario-six" role="tab" aria-controls="scenario-six" aria-selected="false">Scenario 6</a>
    </li>
</ul>
 
::::{.tab-content .text-bg-body-secondary .p-3 .mb-3 .border-start .border-end .border-bottom .rounded-bottom}
:::{.tab-pane .fade .show .active #scenario-four role=tabpanel aria-labelledby=scenario-four-tab}
Scenario 4 Content
:::
:::{.tab-pane .fade #scenario-five role=tabpanel aria-labelledby=scenario-five-tab}
Scenario 5 Content
:::
:::{.tab-pane .fade #scenario-six role=tabpanel aria-labelledby=scenario-six-tab}
Scenario 6 Content
:::
::::

Trigger Multiple Tabs at Once

Sometimes, multiple tabs in different spots of the page need triggered at the same time. An example of this use case would be on docs.chocolatey.org and separating Chocolatey v1 information from Chocolatey v2. In the example below, clicking the "v2" tab will trigger the other tab container to also navigate to the "v2" tab. This preference is stored as a cookie, and triggered on load as well.

This is achieved by adding the data-choco-tab-multi='{"${cookieName}": "${cookieValue}"}' attribute to each .nav-link with the same corresponding value of those that need to be triggered.

The .nav-link that triggers this content contains data-choco-tab-multi='{"choco-version": "choco-v2"}'.

The .nav-link that triggers this content contains data-choco-tab-multi='{"choco-version": "choco-v1"}'.

The .nav-link that triggers this content contains data-choco-tab-multi='{"choco-version": "choco-v2"}'.

The .nav-link that triggers this content contains data-choco-tab-multi='{"choco-version": "choco-v1"}'.

HTML


<!-- Top Tab Container List -->
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="choco-v2-image-tab" data-bs-toggle="tab" href="#choco-v2-image-tab-pane" data-choco-tab-multi='{"choco-version": "choco-v2"}' role="tab" aria-controls="choco-v2-image-tab-pane" aria-selected="true">Chocolatey CLI v2.x</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="choco-v1-image-tab" data-bs-toggle="tab" href="#choco-v1-image-tab-pane" data-choco-tab-multi='{"choco-version": "choco-v1"}' role="tab" aria-controls="choco-v1-image-tab-pane" aria-selected="false">Chocolatey CLI v1.x</a>
    </li>
</ul>
<!-- Bottom Tab Container List -->
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="choco-v2-commands-tab" data-bs-toggle="tab" href="#choco-v2-commands-tab-pane" data-choco-tab-multi='{"choco-version": "choco-v2"}' role="tab" aria-controls="choco-v2-commands-tab-pane" aria-selected="true">Chocolatey CLI v2.x</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="choco-v1-commands-tab" data-bs-toggle="tab" href="choco-v1-commands-tab-pane" data-choco-tab-multi='{"choco-version": "choco-v1"}' role="tab" aria-controls="choco-v1-commands-tab-pane" aria-selected="false">Chocolatey CLI v1.x</a>
    </li>
</ul>

Multiple Tab Instances

While multiple sets of connected tabs can be initiated, it is important to follow the table below to know which ${cookieName} and ${cookieValue} to use to achieve the desired functionality.

:choco-warning: WARNING

Before adding new keys and values, they must be agreed upon and updated here. This is to ensure we have consistency across all pages and avoid setting the wrong values.

${cookieName} ${cookieValue}
choco-version Possible values of choco-v1 or choco-v2.