Description: The purpose of tabs are to display lengthy content in groups that will allow the user to quickly access information by selecting the individual tabs.

TIP: By default the first tab is selected. To make any tab active, simply add the class of "active" to <li> and "active" to the <div> under tab-content. Be sure to only have 1 active class.

508 Guidelines: For the tabs to be keyboard accessible, assure that the href="#" is present.

Tabs

<div class="tab-container" role="tabpanel">
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" data-toggle="tab">Tab 1<span class="sr-only">
		You are currently on a tab. There is content below. Continue to arrow down until it indicates that the content is being 
		read.</span></a></li>
		<li role="presentation"><a href="#tab2" aria-controls="tab2" data-toggle="tab">Tab 2<span class="sr-only">
		You are currently on a tab. To select this tab, press enter. There is content below. 
		Continue to arrow down until it indicates that the content is being read.</span></a></li>
		<li role="presentation"><a href="#tab3" aria-controls="tab3"  data-toggle="tab">Tab 3<span class="sr-only">
		You are currently on a tab. To select this tab, press enter. There is content below. 
		Continue to arrow down until it indicates that the content is being read.</span></a></li>
	</ul>
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="tab1"><span class="sr-only">This is the content for Tab 1.</span>
			<p>I am tab 1 content.</p>
		</div>
		<div role="tabpanel" class="tab-pane" id="tab2"><span class="sr-only">This is the content for Tab 2.</span>
			<p>I am tab 2 content.</p>
		</div>
		<div role="tabpanel" class="tab-pane" id="tab3"><span class="sr-only">This is the content for Tab 3.</span>
			<p>I am tab 3 content.</p>
		</div>
	</div>
</div>

Copy

Tabs