Simple Lightweight jQuery Responsive Tabs & Accordion Plugin

by

I found an awesome jquery plugin to create Simple Lightweight jQuery Responsive Tabs & Accordion. Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
jquery-responsive-tabs-accordian

Responsive Tabs Features:

* Tabs transform to accordion based on breakpoint
* Uses javascript / jQuery for the technical tab switching (class based)
* Uses CSS for the desktop/tablet/mobile view
* Has callback events for the tab events
* Tabs can be opened with URL hashes
* Tabs can auto rotate
* Tabs can be collapsed (optional)
* Tabs can start collapsed based on the view (optional)
* Tabs can be disabled
* The tabs are controllable with API methods
* Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
* Multiple device support (Web, Tablet, Mobile, etc)


Integrate jQuery Responsive Tabs & Accordion

Follow below steps to add jQuery Responsive Tabs & Accordion feature on your web project.

Libraries

Include jquery.responsiveTabs.min.js with jquery latest libraries.

Include responsive-tabs.css for the basic Tabs to Accordion switching.

Include style.css for a basic tab/accordion theme.

HTML

Create HTML markup to display tabs.


    

    
 ....... 

    
 ....... 

    
 .......



JS

Use this jQuery function to enable responsive tabs on the selected element.

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

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.



Published by Rohit