Tabs
Tabs
Save space by offering multiple sections of information in one area.
Examples
First tab content
Code
<div id="copyTabs" class="tabs4i fullWidth borderMdGray">
<div class="tabList displayFlex flexNoWrap flexSpaceBetween" role="tablist" aria-label="Tab Examples">
<button id="tabOne" class="tabLink active" role="tab" data-content="tabPanelOne" aria-controls="tabPanelOne" aria-selected="true">
<h2>First Tab Title</h2>
</button>
<button id="tabTwo" class="tabLink" tabindex="-1" role="tab" data-content="tabPanelTwo" aria-controls="tabPanelTwo" aria-selected="false">
<h2>Second Tab Title</h2>
</button>
</div>
<section id="tabPanelOne" role="tabpanel" class="tabContent bkgdWhite" aria-label="Tab Example One" aria-hidden="false">
<p class="text16">First tab content</p>
</section>
<section id="tabPanelTwo" role="tabpanel" class="tabContent bkgdWhite hide" aria-label="Tab Example Two" aria-hidden="true">
<p class="text16">Second tab content</p>
</section>
</div>
Notes
None at this time.
Resources
Sass File(s) | /sass/components/_tabs.scss |
---|---|
JS File(s) | /library/tabs4i.js |
JS Functions | Tabs Javascript |
Locale Keys | None |
Accessibility
Update aria-controls
and aria-label
.