Tabs¶

Basic tabs¶

A [role="tablist"] of plain [role="tab"] buttons, each controlling a [role="tabpanel"]. Mark the open one aria-selected="true".

<div class="tabs" role="tablist">
  <button type="button" role="tab" id="tab-a"
          aria-controls="panel-a" aria-selected="true">Parameters</button>
  <button type="button" role="tab" id="tab-b"
          aria-controls="panel-b" aria-selected="false" tabindex="-1">JSON</button>
</div>
<div id="panel-a" role="tabpanel" aria-labelledby="tab-a">…</div>
<div id="panel-b" role="tabpanel" aria-labelledby="tab-b" hidden>…</div>

Behavior¶

The styling is CSS-only. Wire the switching in JS: on click, mark the active tab and toggle each panel's hidden.

function selectTab(active) {
  for (const tab of document.querySelectorAll('[role="tab"]')) {
    const on = tab === active;
    tab.setAttribute('aria-selected', String(on));
    tab.tabIndex = on ? 0 : -1;
    document.getElementById(tab.getAttribute('aria-controls')).hidden = !on;
  }
}