Tabs - Vertical
Vertical tabs are accordions by default, and through the use of breakpoint classes, turn into vertical 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: Vertical tab accordions work slightly differently from the accordion component in that the vertical tab accordion action will close all other open vertical-tabs--tab-content containers. Accordions do not close other content containers.
Vertical require jQuery and the Mercury UI Framework vertical tabs plugin to work. Note: You will need
to initialize them by calling $().mercuryuiTabsVertical();.
You can also open vertical tabs individually via the plugin through actions by targeting the id of the tab:
$('#vertical-tab-xxs-content-1').mercuryuiTabsVertical('open'); .
Callbacks are provided for beforeOpen and afterOpen. An example for afterOpen would be:
$('#vertical-tab-xxs-content-1').mercuryuiTabsVertical('open', { afterOpen: function(){ alert('Tab opened!'); } });.
Base
Note: The base example does not include the vertical-tabs--tab-list container which includes the actual vertical-tabs--tab tab buttons. You probably want one of the breakpoints below.
Tab 1 content
<div class="vertical-tabs" id="vertical-tabs--base">
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-base-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-base-content-1" aria-labelledby="vertical-tab-base-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-base-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-base-content-2" aria-labelledby="vertical-tab-base-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XXS & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xxs" id="vertical-tabs--xxs">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxs-1" aria-controls="vertical-tab-xxs-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxs-2" aria-controls="vertical-tab-xxs-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xxs-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xxs-content-1" aria-labelledby="vertical-tab-xxs-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xxs-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xxs-content-2" aria-labelledby="vertical-tab-xxs-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XS & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xs" id="vertical-tabs--xs">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xs-1" aria-controls="vertical-tab-xs-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xs-2" aria-controls="vertical-tab-xs-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xs-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xs-content-1" aria-labelledby="vertical-tab-xs-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xs-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xs-content-2" aria-labelledby="vertical-tab-xs-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>SM & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--sm" id="vertical-tabs--sm">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-sm-1" aria-controls="vertical-tab-sm-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-sm-2" aria-controls="vertical-tab-sm-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-sm-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-sm-content-1" aria-labelledby="vertical-tab-sm-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-sm-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-sm-content-2" aria-labelledby="vertical-tab-sm-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>MD & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--md" id="vertical-tabs--md">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-md-1" aria-controls="vertical-tab-md-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-md-2" aria-controls="vertical-tab-md-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-md-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-md-content-1" aria-labelledby="vertical-tab-md-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-md-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-md-content-2" aria-labelledby="vertical-tab-md-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>LG & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--lg" id="vertical-tabs--lg">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-lg-1" aria-controls="vertical-tab-lg-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-lg-2" aria-controls="vertical-tab-lg-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-lg-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-lg-content-1" aria-labelledby="vertical-tab-lg-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-lg-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-lg-content-2" aria-labelledby="vertical-tab-lg-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XL & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xl" id="vertical-tabs--xl">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xl-1" aria-controls="vertical-tab-xl-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xl-2" aria-controls="vertical-tab-xl-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xl-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xl-content-1" aria-labelledby="vertical-tab-xl-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xl-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xl-content-2" aria-labelledby="vertical-tab-xl-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XXL & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xxl" id="vertical-tabs--xxl">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxl-1" aria-controls="vertical-tab-xxl-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxl-2" aria-controls="vertical-tab-xxl-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xxl-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xxl-content-1" aria-labelledby="vertical-tab-xxl-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xxl-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xxl-content-2" aria-labelledby="vertical-tab-xxl-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>