Tabs

Overview

Tabs come in two different styles, regular tabs and pill tabs, each with a horizontal and vertical option. The tabs can load content from on the page, AJAX content from the same site, or an external site loaded in an iframe. On mobile-sized screens, all tabs types will seamlessly transform into an accordion panel interface.

Usage

All of the tab styles are constructed the same way, with the only difference being the classes assigned to the containers. Each set of tabs has two main containers, a container for the tab menu and one for the tab content.

Tab menu containers are simple unordered lists of links with a class of tabs, tabsVertical, pillTabs, or pillTabsVertical. The tab content containers have classes of either tabContent or pillTabContent.

The tab content container should contain div elements as individual tabs, each with a unique id. The links in the tab menu should link to the tab id. To set a tab as active, give both the link and the tab div classes of active.

Loading AJAX Content

A tab's content can be loaded completely through AJAX by using the data-targetUrl attribute in a tab menu link. If the value of data-targetUrl is a relative URL, the content will be loaded directly into the tab. If it is a full URL beginning with http, the content will be loaded into an iframe and inserted into the tab. Note In both cases, an empty tab placeholder div with an id is required in the tab content container.

Tab Layout Considerations

The tab widget will take up 100% of the parent's available horizontal space, so plan accordingly. Vertical tab menus are 20% wide, with the content area taking up the remaining 80%. The regular tabs content areas have a padding of 1em and a border while pill tabs content areas have no border. Horizontal pill tabs content areas have top and bottom padding of 1.75em, while content areas for vertical pill tabs have only a bottom padding of 1.75em.

Inline Tabs

<ul class="tabs">
	<li><a href="#tab1" class="active">Tab 1</a></li>
	<li><a href="#tab2">Tab 2</a></li>
	<li><a href="#tab3">Tab 3</a></li>
	<li><a href="#tab4">Tab 4</a></li>
</ul>
<div class="tabContent">
	<div id="tab1" class="active">Tab Content 1</div>
	<div id="tab2">Tab Content 2</div>
	<div id="tab3">Tab Content 3</div>
	<div id="tab4">Tab Content 4</div>
</div>

Same-site AJAX Tabs

<ul class="tabs">
	<li><a href="#tab1" class="active">Tab 1</a></li>
	<li><a href="#tab2"  data-targetUrl="../ajax/content.html">Tab 2</a></li>
</ul>
<div class="tabContent">
	<div id="tab1" class="active">Tab Content 1</div>
	<div id="tab2">This will never be shown.</div>
</div>

External Iframe AJAX Tabs

<ul class="tabs">
	<li><a href="#tab1" class="active">Tab 1</a></li>
	<li><a href="#tab2"  data-targetUrl="http://uiframework.com">Tab 2</a></li>
</ul>
<div class="tabContent">
	<div id="tab1" class="active">Tab Content 1</div>
	<div id="tab2">This will never be shown.</div>
</div>

Tabs Demo

Tab 1
Tab 2 (iframe)
Tab 3 (AJAX)
Tab 4