Tabs
Docs & Examples
Source
Stimulus Actions
toggle
html
<div class="x-tabs" data-controller="x-tabs">
<div class="x-tabs-content" role="tablist">
<button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-all" id="all" aria-selected="true">
All
</button>
<button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-photos" id="photos">
Photos
</button>
<button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-music" id="music">
Music
</button>
<button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-documents" id="documents">
Documents
</button>
</div>
<div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="false" id="tab-all" aria-labelledby="all">
All
</div>
<div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="true" id="tab-photos" aria-labelledby="photos">
Photos
</div>
<div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="true" id="tab-music" aria-labelledby="music">
Music
</div>
<div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="true" id="tab-documents" aria-labelledby="documents">
Documents
</div>
</div>