Tabs

Switch between related panels — full WAI-ARIA tabs pattern.

The agenda content.

Show the markup

<div data-cc-tabs>
  <div class="cc-tabs__list" role="tablist" aria-label="Meeting documents">
    <button class="cc-tabs__tab" role="tab" id="ex-tab-a" aria-controls="ex-panel-a" aria-selected="true" type="button">Agenda</button>
    <button class="cc-tabs__tab" role="tab" id="ex-tab-m" aria-controls="ex-panel-m" aria-selected="false" type="button">Minutes</button>
  </div>
  <div class="cc-tabs__panel" role="tabpanel" id="ex-panel-a" aria-labelledby="ex-tab-a" tabindex="0">
    <p class="cc-paragraph">The agenda content.</p>
  </div>
  <div class="cc-tabs__panel" role="tabpanel" id="ex-panel-m" aria-labelledby="ex-tab-m" tabindex="0" hidden>
    <p class="cc-paragraph">The minutes content.</p>
  </div>
</div>

Accessibility

Arrow keys move between tabs (with Home/End); Tab moves into the panel — roving tabindex per the ARIA pattern.
Selection is aria-selected plus a thick underline — not color alone.
Panels are focusable so keyboard users can scroll them.
If the sections deserve URLs, use real pages with a chip nav instead.