Tabbed Content

Use Guidelines

Tabbed content is not compatible with the folder display, "Accordion."

Tab Titles

Remember Mobile Use:

Each tab title should be one word to ensure optimal display on mobile.
Tabs with lengthy tiles will wrap onto two lines, and be very confusing on mobile.

Remember Print Use: Include tab titles as headings in the same fragment div as the content. Headings in the fragment div can be the longer, expanded version of the tab title. The headings will appear when printed, whereas the tab titles do not.

Number of Tabs

Use no more than to two three.
Make sure they display well on mobile.

Source Code:
<div class="enableContentTabs" id="tabs">
<ul>
<li><a href="#fragment-1"><span>Achievement</span></a></li>
<li><a href="#fragment-2"><span>Performance</span></a></li>
<li><a href="#fragment-3"><span>Success</span></a></li>
</ul>

<div id="fragment-1">
<p>This first tab is active by default.</p>
</div>

<div id="fragment-2">
<p>This second tab is inactive by default.</p>
</div>

<div id="fragment-3">
<p>This third tab is inactive by default.</p>
</div>

</div>

Achievement
Performance
Success

Achievement is a Three-Syllable Word

This first tab is active by default:

$( "#tabs" ).tabs();

Performance is Another Three-Syllable Word

This is the second tab.

Success is Only a Two-Syllable Word

3rd tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.