Tabs

One panel shows at a time. The tablist is a row of buttons; the panels follow it, one per button, in order.

Basic

<div data-tabs>
  <div role="tablist" aria-label="Build">
    <button>Overview</button><button>Folders</button><button>Pages</button>
  </div>
  <section><p>Built 14:02 from <code>~/code/atlas</code>. 182 pages, 1 warning.</p></section>
  <section><p>Content in <code>content/</code>. Templates in <code>layouts/</code>. Output in <code>_site/</code>.</p></section>
  <section><p>1,204 pages. The slowest is <code>guide/index.md</code>, at 94 ms.</p></section>
</div>

Arrow keys move between tabs. Home and End jump to the ends.

Notes

• State is aria-selected; s72.js keeps it, the tabindex and each panel's hidden in step.
• The script adds role="tab", role="tabpanel" and the aria-controls and aria-labelledby pair, so the markup stays plain.
• Set aria-selected="true" on a button to choose which tab opens; otherwise the first one does.
• The chosen tab is underlined.