Developer manual

Tabs

This page demonstrates tabbed content areas.

The tab menu

To create a tabbed content section first start with an unordered list with an attribute data-spring-plugin with a value of tabs. This will trigger Spring to automatically include the required javascript:

<ul id="tabs" data-spring-plugin="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

The href of each tab should contain a fragment identifier (i.e. #something). This fragment identifier then needs to match the html id of an element on the current page. This is similar to creating an 'anchor' link on a page.

Options:

  • Attribute: data-tabs-menu = 'hover[default]|click' - this will control whether the menu activates on click or on hover
<ul id="tabs" data-spring-plugin="tabs" data-tabs-menu="click">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

Content Panels

For each tab link, there needs to be a corresponding html element with a matching id. Additionally, give each tab content panel a class of panel to allow styling.

<div id="tab1" class="panel">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="tab2" class="panel">
<p>Sed orci magna, semper in, faucibus id, porttitor</p>
<p>In ante massa, accumsan nec, suscipit sed</p>
</div>
<div id="tab3" class="panel">
<div class="wrap">
<p>Proin at dolor sed nibh aliquam tempus</p>
<p>Donec urna orci, rutrum in</p>
</div>
</div>

CSS

As an example, add the following css:

#content #tabs {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
#content #tabs li {
float: left;
}
#content #tabs a {
float: left;
margin: 0 6px 0 0;
padding: 4px 12px 2px 12px;
background-color: #ddd;
color: #888;
text-decoration: none;
}
#content #tabs a.active-tab {
background-color: #333;
color: #fff;
}
#content .panel {
position: relative;
display: none;
background-color: #fff;
padding: 20px;
border: 1px solid #333;
}
#content .panel.active-tab-body {
display: block;
}