Skip to main content Skip to main navigation

Tabs - Horizontal

Horizontal tabs are accordions by default, and through the use of breakpoint classes, turn into tabs. The experience for small screen devices will be better, and you can also control when tabs show if you have many tabs. Tabs have many classes, id's, and attributes needed to work properly, so if you have issues, make sure you haven't forgotten one.

Note: Horizontal tab accordions work slightly differently from the accordion component in that the horizontal tab accordion action will close all other open horizontal-tabs--tab-content containers. Accordions do not close other content containers.

Horizontal require jQuery and the Mercury UI Framework horizontal tabs plugin to work. Note: You will need to initialize them by calling $().mercuryuiTabsHorizontal();.

You can also open horizontal tabs individually via the plugin through actions by targeting the id of the tab: $('#horizontal-tab-xxs-content-1').mercuryuiTabsHorizontal('open'); .

Callbacks are provided for beforeOpen and afterOpen. An example for afterOpen would be: $('#horizontal-tab-xxs-content-1').mercuryuiTabsHorizontal('open', { afterOpen: function(){ alert('Tab opened!'); } });.

Base

Note: The base example does not include the horizontal-tabs--tabs container which includes the actual horizontal-tabs--tab tab buttons. You probably want one of the breakpoints below.

Tab 1 content

<div class="horizontal-tabs" id="horizontal-tabs--base">
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-base-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-base-content-1" aria-labelledby="horizontal-tab-base-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-base-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-base-content-2" aria-labelledby="horizontal-tab-base-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

XXS & Up

Tab 1 content

<div class="horizontal-tabs horizontal-tabs--xxs" id="horizontal-tabs--xxs">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xxs-1" aria-controls="horizontal-tab-xxs-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xxs-2" aria-controls="horizontal-tab-xxs-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xxs-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xxs-content-1" aria-labelledby="horizontal-tab-xxs-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xxs-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-xxs-content-2" aria-labelledby="horizontal-tab-xxs-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

XS & Up

Tab 1 content

<div class="horizontal-tabs horizontal-tabs--xs" id="horizontal-tabs--xs">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xs-1" aria-controls="horizontal-tab-xs-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xs-2" aria-controls="horizontal-tab-xs-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xs-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xs-content-1" aria-labelledby="horizontal-tab-xs-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xs-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-xs-content-2" aria-labelledby="horizontal-tab-xs-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

SM & Up

Tab 1 content

<div class="horizontal-tabs horizontal-tabs--sm" id="horizontal-tabs--sm">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-sm-1" aria-controls="horizontal-tab-sm-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-sm-2" aria-controls="horizontal-tab-sm-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-sm-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-sm-content-1" aria-labelledby="horizontal-tab-sm-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-sm-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-sm-content-2" aria-labelledby="horizontal-tab-sm-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

MD & Up

Tab 1 content 
<div class="horizontal-tabs horizontal-tabs--md" id="horizontal-tabs--md">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-md-1" aria-controls="horizontal-tab-md-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-md-2" aria-controls="horizontal-tab-md-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-md-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-md-content-1" aria-labelledby="horizontal-tab-md-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-md-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-md-content-2" aria-labelledby="horizontal-tab-md-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

LG & Up

Tab 1 content

<div class="horizontal-tabs horizontal-tabs--lg" id="horizontal-tabs--lg">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-lg-1" aria-controls="horizontal-tab-lg-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-lg-2" aria-controls="horizontal-tab-lg-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-lg-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-lg-content-1" aria-labelledby="horizontal-tab-lg-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-lg-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-lg-content-2" aria-labelledby="horizontal-tab-lg-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

XL & Up

Tab 1 content

<div class="horizontal-tabs horizontal-tabs--xl" id="horizontal-tabs--xl">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xl-1" aria-controls="horizontal-tab-xl-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xl-2" aria-controls="horizontal-tab-xl-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xl-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xl-content-1" aria-labelledby="horizontal-tab-xl-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xl-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-xl-content-2" aria-labelledby="horizontal-tab-xl-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>

XXL & Up

Tab 1 content

<div class="horizontal-tabs horizontal-tabs--xxl" id="horizontal-tabs--xxl">
    <div class="horizontal-tabs--tabs">
        <button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xxl-1" aria-controls="horizontal-tab-xxl-content-1" aria-selected="true">Tab 1</button>
        <button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xxl-2" aria-controls="horizontal-tab-xxl-content-2" aria-selected="false">Tab 2</button>
    </div>
    <div class="horizontal-tabs--tab-contents">
        <button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xxl-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xxl-content-1" aria-labelledby="horizontal-tab-xxl-1" aria-hidden="false">
            <p>Tab 1 content</p>
        </div>
        <button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xxl-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
        <div class="horizontal-tabs--tab-content" id="horizontal-tab-xxl-content-2" aria-labelledby="horizontal-tab-xxl-2" aria-hidden="true">
            <p>Tab 2 content</p>
        </div>
    </div>
</div>