Responsive jQuery Tabbed Panels Plugin - Tabber

File Size: 16.4 KB
Views Total: 7113
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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=""></script>
<!--[if IE 9]>
<script src="ie/matchMedia.ie9.js"></script>
<!--[if LTE IE 8]>
<script src="ie/matchMedia.ie8.js"></script>

4. Create your tabbed interface following the html structure:

<div class="tabbed">

<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> 

<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>


5. Add some styles to the tabbed interface.

.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 {
background: #eee;
.tabber .tabber-tab {
background: #eee;
padding: 20px;

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

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

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.