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 FunctionsTabs Javascript
Locale KeysNone

Accessibility

Update aria-controls and aria-label.

To Top of page