Responsive jQuery Tabbed Panels Plugin - Tabber

Tabber is a jQuery plugin to create a responsive tabs/tabbed interface that will be converted into a mobile-friendly list when the window's size has reached the breakpoint.

How to use it:

1. Load the jQuery library and JQuery tabber plugin in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.fs.tabber.js"></script>

2. Add the required jQuery tabber's stylesheet file in the head section of your page.

<link href="src/jquery.fs.tabber.css" rel="stylesheet" type="text/css" media="all" />

3. Add fixes for support of IE7/8/9.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 9]>
<script src="ie/matchMedia.ie9.js"></script>
<![endif]-->
<!--[if LTE IE 8]>
<script src="ie/matchMedia.ie8.js"></script>
<![endif]-->

4. Create your tabbed interface following the html structure:

<div class="tabbed">

<nav> 
<a href="#tab-1" class="tabber-handle">Tab 1</a> 
<a href="#tab-2" class="tabber-handle">Tab 2</a> 
<a href="#tab-3" class="tabber-handle">Tab 3</a> 
...
</nav>

<div class="tabber-tab" id="tab-1"> Content 1 </div>
<div class="tabber-tab" id="tab-2"> Content 2 </div>
<div class="tabber-tab" id="tab-3"> Content 3 </div>
...

</div>

5. Add some styles to the tabbed interface.

<style>
.tabber .tabber-handle {
display: block;
float: left;
font-size: 16px;
line-height: 40px;
margin: 0 1px 0 0;
padding: 0 20px;
}
.tabber a {
text-decoration: none;
}
.tabber .tabber-handle.active {
background: #eee;
}
.tabber .tabber-tab {
background: #eee;
padding: 20px;
}
</style>

6. Call the plugin and set the breakpoint in the javascript.

<script>
$(document).ready(function() {
$(".tabbed").tabber({
customClass: "", // Class applied to instance
maxWidth: "980px", // Width at which to auto-disable mobile styles
vertical: false // vertical tab sets
});
});
</script>

Change log:

v3.0.12 (2014-09-15)

• Fixing issue with mediaquery listeners

v3.0.10 (2014-07-20)

• Finally getting the index thing worked out.

v3.0.6 (2014-05-04)

• Adding option for vertical tab sets;

v3.0.5 (2014-02-07)

• Fixing data checks;

v3.0.4 (2014-01-30)

• Fixing issues with "select" method when index is out of bounds;
• Fixing "destroy" method to properly clean up;
• Fixing demo;

v3.0.3 (2014-01-14)

• Fixing issue with active state when responding to media queries;

---

This awesome jQuery plugin is developed by Formstone. For more Advanced Usages, please check the demo page or visit the official website.