Skip to content
STYLESCAPE

Tab

Examples for the ss-c-tab module. With data-ss="tabs", TabManager shows one panel at a time (hidden on the others), keeps aria-selected, roving tabindex and ss-c-tab__item--active in sync, and moves with the arrow keys, Home and End. Pair tabs and panels with aria-controls, or with data-ss-tab / data-ss-tab-panel; missing roles and ids are filled in. Without the script, mark the first tab active and add hidden to the other panels yourself.

Tabs

London is the capital city of England.

HTML 
<div class="ss-c-tab" data-ss="tabs">
            <div class="ss-c-tab__list" role="tablist" aria-label="Cities">
                <button type="button" class="ss-c-tab__item ss-c-tab__item--active" role="tab" aria-selected="true" aria-controls="city-london" id="tab-london">London</button>
                <button type="button" class="ss-c-tab__item" role="tab" aria-selected="false" aria-controls="city-paris" id="tab-paris" tabindex="-1">Paris</button>
                <button type="button" class="ss-c-tab__item" role="tab" aria-selected="false" aria-controls="city-tokyo" id="tab-tokyo" tabindex="-1">Tokyo</button>
            </div>
            <div class="ss-c-tab__panel" id="city-london" role="tabpanel" aria-labelledby="tab-london" tabindex="0">
                <p>London is the capital city of England.</p>
            </div>
            <div class="ss-c-tab__panel" id="city-paris" role="tabpanel" aria-labelledby="tab-paris" tabindex="0" hidden>
                <p>Paris is the capital of France.</p>
            </div>
            <div class="ss-c-tab__panel" id="city-tokyo" role="tabpanel" aria-labelledby="tab-tokyo" tabindex="0" hidden>
                <p>Tokyo is the capital of Japan.</p>
            </div>
        </div>

Short form

General settings.

HTML 
<div class="ss-c-tab" data-ss="tabs">
            <div class="ss-c-tab__list" aria-label="Settings">
                <button type="button" class="ss-c-tab__item ss-c-tab__item--active" data-ss-tab="general">General</button>
                <button type="button" class="ss-c-tab__item" data-ss-tab="privacy">Privacy</button>
            </div>
            <div class="ss-c-tab__panel" data-ss-tab-panel="general"><p>General settings.</p></div>
            <div class="ss-c-tab__panel" data-ss-tab-panel="privacy" hidden><p>Privacy settings.</p></div>
        </div>