Responsive Tabbed Content jQuery Plugin – Responsive-Tabs

Category: jQuery | Sub-Category: Tabbed Content

Description

responsive tabbed content

Fully Responsive tabbed content jQuery plugin that adapts to every screen.

Features

  • Tabs transform to accordion when CSS breakpoint is reached
  • Uses CSS for viewing through different devices
  • Tab callback events
  • URL hashes option for tabs opening
  • Tabs can autoplay
  • Collapsible tabs (optional)
  • Tabs can start as accordion (optional)
  • Disabled tabs option
  • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)

Dependencies

CSS

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

jQuery

<script src="js/jquery.js"></script>
<script src="js/jquery.responsiveTabs.js"></script>

Usage

To start, just follow the simple markup:

<div id="responsiveTabsDemo">
    <ul>
        <li><a href="#tab-1"> .... </a></li>
        <li><a href="#tab-2"> .... </a></li>
        <li><a href="#tab-3"> .... </a></li>
    </ul>

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

Then call the plugin like this:

$('#responsiveTabsDemo').responsiveTabs({
    startCollapsed: 'accordion'
});

Options

collapsible 
// Makes tabs collapsible. 'tabs' and 'accordion' can be used accordingly for applying
// the collapsible option only to a specific state of responsive tabs (tabs or accordion).
// Default value: true. Accepts parameters: true, false, 'tabs', 'accordion'

startCollapsed
// Sets first panel that loads by default to be collapsible. Using the values 'tabs' and 
// 'accordion' you can apply the collapsible option only to a specific state of responsive
// tabs (tabs or accordion). Accepts parameters: true, false, 'tabs', 'accordion'

disabled
// An array holding the tabs that should be disabled. Example usage: disabled: [0,1]

active
// Sets the default active tab that will be initially opened on load. Integer

accordionTabElement
// Containing element that will wrap the accordion. Eg. '<div></div>'

setHash 
// Enable/Disable the setting of a reference to the selected tab in the URL hash. When set // to 'true', new tab selection will set the reference to that tab in the URL hash. 

rotate 
// Enable/Disable auto rotation of tabs. Rotation will stop when a tab is selected. 
// Boolean. Accepts: true, or false 

event 
// Add event for tab activation. For instance: 'mouseenter', 'mouseover', etc. Defaults to 'click' 

animation 
// Enable the panel animation. Default value will cause the panels only to show/hide on 
// transition, but this option allows you to set panels to slide up/down or fade in/out.
// accepts: 'slide', or 'fade'

Callbacks

activate: function(event, tab){} // fires when tab is activated

deactivate: function(event, tab){} // fires when tab is deactivated

load: function(event, firstTab){} // fires when plugin has been loaded

activateState: function(){} // fires on state switching (tab/accordion)