Lightweight jQuery Responsive Tabs & Accordion Plugin - Responsive Tabs

Lightweight jQuery Responsive Tabs & Accordion Plugin - Responsive Tabs
File Size: 79.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

Responsive Tabs is a lightweight and simple jQuery plugin for responsive tabbed interface that will transform to an accordion on window size change.

Basic Usage:

1. Include jQuery library and jQuery Responsive Tabs Plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>

2. Include required css file to style the plugin

<link type="text/css" rel="stylesheet" href="css/responsive-tabs.css" />

3. Create the html for the tabbed interface

<div id="horizontalTab">
<ul>
<li><a href="#tab-1">Responsive Tab-1</a></li>
<li><a href="#tab-2">Responsive Tab-2</a></li>
<li><a href="#tab-3">Responsive Tab-3</a></li>
</ul>
<div id="tab-1">
<p> ... </p>
</div>
<div id="tab-2">
<p> ... </p>
</div>
<div id="tab-3">
<p> ... </p>
</div>
</div>

4. The CSS for this demo

.r-tabs {
position: relative;
}
.r-tabs .r-tabs-nav {
border-bottom: 1px solid #ccc;
}
.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
top: 1px;
}
.r-tabs .r-tabs-nav .r-tabs-anchor {
background: #00aadd;
margin-bottom: 3px;
padding: 10px 12px;
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
}
.r-tabs .r-tabs-nav .r-tabs-state-active {
background-color: #fff;
margin-bottom: -1px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
color: #00aadd;
background-color: #fff;
}
.r-tabs .r-tabs-panel {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 3px;
}
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: 10px;
background-color: #00aadd;
color: #fff;
font-weight: bold;
text-decoration: none;
margin-bottom: 3px;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #00aadd;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 0;
}

5. Call the plugin with options

<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').responsiveTabs({
startCollapsed: 'accordion', // Start with the panels collapsed if the view is currently accordion based
collapsible: true, // Tabs can be collapsed
rotate: false // Tabs auto rotate
});
});
</script>

6. All the options

// called after a tab is selected
active: null,

// specify the event that activates a tab
event: 'click',

// An array with zero based integers that define the tabs that should be disabled
disabled: [],

// If set to 'true' the panels are collapsible. 
// 'tabs', 'accordion', true or false
collapsible: 'accordion',

// Defines if the first panel on load starts collapsed or not. 
// 'tabs', 'accordion', true or false
startCollapsed: false,

// auto rotate the tabs
rotate: false,

// the setting of a reference to the selected tab in the URL hash.
setHash: false,

// enables the animation of the panels
// 'default', 'fade' or 'slide'
animation: 'default',

// animation duration
duration: 500,

// An 0 based integer that defines the initial opened tab on load.
activate: function(){},

// called after a tab is deactivated
deactivate: function(){},

// called after the plugin has been loaded
load: function(){},

// called after the plugin switches from state
activateState: function(){},

// CSS classes
classes: {
  stateDefault: 'r-tabs-state-default',
  stateActive: 'r-tabs-state-active',
  stateDisabled: 'r-tabs-state-disabled',
  stateExcluded: 'r-tabs-state-excluded',
  tab: 'r-tabs-tab',
  anchor: 'r-tabs-anchor',
  panel: 'r-tabs-panel',
  accordionTitle: 'r-tabs-accordion-title'
}

Change logs:

v1.4.2 (2014-12-18)

v1.4.0 (2014-08-03)

  • Update.

v1.3.5 (2014-06-11)

  • Added tab object as an arg to the animate callback

v1.3.4 (2014-05-28)

  • update.

v1.3.3 (2014-04-01)

  • update.

v1.3.1 (2014-03-28)

  • Added classes and css for accordion state

v1.3.0 (2014-03-27)

  • Added disabled setting
  • Improved the demo a bit

v1.2.0 (2014-02-06)

  • Added 'active' option

v1.1.2 (2014-01-15)

  • Fixed default animation bug

v1.1.1 (2013-11-15)

  • Added Tabs collapsibility based on the state.

v1.1.0 (2013-11-01)

  • Added animation

v1.0.2 (2013-08-19)

  • Added the setHash option

 


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