Tabs
Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.
First panel content goes here. Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Second panel content goes here. Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Third panel content goes here. Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Basic
You can create a group of horizontal tabs using minimal markup.
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
<dd><a href="#panel2-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
</div>Full width
You can have the background color of the tabs take up 100% of the width of its container by adding the full-width class to the tabs element.
The background color will be the same as the inactive state of the tabs.
<dl class="tabs full-width" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
<dd><a href="#panel2-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
</div>Vertical Tabs
You can create a group of vertical tabs using minimal markup.
<dl class="tabs vertical" data-tab>
<dd class="active"><a href="#panel1a">Tab 1</a></dd>
<dd><a href="#panel2a">Tab 2</a></dd>
<dd><a href="#panel3a">Tab 3</a></dd>
<dd><a href="#panel4a">Tab 4</a></dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>Callbacks
There are two ways to bind callbacks to your tabs.
Callback Function
$(document).foundation({
tab: {
callback : function(tab) {
console.log(tab);
}
}
});Toggled Event
$('#myTabs').on('toggled', function (event, tab) {
console.log(tab);
});Color Palette
Sonos product classes can be used to add more color options to your tabs.
<dl class="tabs alt" data-tab>
<dd class="active"><a href="#alt-1">Tab 1</a></dd>
<dd><a href="#alt-2">Tab 2</a></dd>
<dd><a href="#alt-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="alt-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="alt-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="alt-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs play1" data-tab>
<dd class="active"><a href="#play1-1">Tab 1</a></dd>
<dd><a href="#play1-2">Tab 2</a></dd>
<dd><a href="#play1-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="play1-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="play1-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="play1-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs play3" data-tab>
<dd class="active"><a href="#play3-1">Tab 1</a></dd>
<dd><a href="#play3-2">Tab 2</a></dd>
<dd><a href="#play3-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="play3-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="play3-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="play3-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs play5" data-tab>
<dd class="active"><a href="#play5-1">Tab 1</a></dd>
<dd><a href="#play5-2">Tab 2</a></dd>
<dd><a href="#play5-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="play5-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="play5-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="play5-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs playbar" data-tab>
<dd class="active"><a href="#playbar-1">Tab 1</a></dd>
<dd><a href="#playbar-2">Tab 2</a></dd>
<dd><a href="#playbar-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="playbar-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="playbar-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="playbar-3">
<p>Third panel content goes here...</p>
</div>
</div>First panel content goes here...
Second panel content goes here...
Third panel content goes here...
<dl class="tabs sub" data-tab>
<dd class="active"><a href="#sub-1">Tab 1</a></dd>
<dd><a href="#sub-2">Tab 2</a></dd>
<dd><a href="#sub-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="sub-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="sub-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="sub-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs connect-amp" data-tab>
<dd class="active"><a href="#connect-amp-1">Tab 1</a></dd>
<dd><a href="#connect-amp-2">Tab 2</a></dd>
<dd><a href="#connect-amp-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="connect-amp-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="connect-amp-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="connect-amp-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs connect" data-tab>
<dd class="active"><a href="#connect-1">Tab 1</a></dd>
<dd><a href="#connect-2">Tab 2</a></dd>
<dd><a href="#connect-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="connect-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="connect-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="connect-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs light" data-tab>
<dd class="active"><a href="#light-1">Tab 1</a></dd>
<dd><a href="#light-2">Tab 2</a></dd>
<dd><a href="#light-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="light-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="light-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="light-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs white" data-tab>
<dd class="active"><a href="#white-1">Tab 1</a></dd>
<dd><a href="#white-2">Tab 2</a></dd>
<dd><a href="#white-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="white-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="white-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="white-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs white-borders" data-tab>
<dd class="active"><a href="#white-borders-1">Tab 1</a></dd>
<dd><a href="#white-borders-2">Tab 2</a></dd>
<dd><a href="#white-borders-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="white-borders-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="white-borders-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="white-borders-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs dark" data-tab>
<dd class="active"><a href="#dark-1">Tab 1</a></dd>
<dd><a href="#dark-2">Tab 2</a></dd>
<dd><a href="#dark-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="dark-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="dark-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="dark-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs amber" data-tab>
<dd class="active"><a href="#amber-1">Tab 1</a></dd>
<dd><a href="#amber-2">Tab 2</a></dd>
<dd><a href="#amber-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="amber-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="amber-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="amber-3">
<p>Third panel content goes here...</p>
</div>
</div><dl class="tabs white bold no-borders hover-bottom" data-tab>
<dd class="active"><a href="#white-no-borders-1">Tab 1</a></dd>
<dd><a href="#white-no-borders-2">Tab 2</a></dd>
<dd><a href="#white-no-borders-3">Tab 3</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="white-no-borders-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="white-no-borders-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="white-no-borders-3">
<p>Third panel content goes here...</p>
</div>
</div>