Simple Lightweight jQuery Responsive Tabs & Accordion Plugin

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.

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.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.responsiveTabs.min.js" type="text/javascript"></script> 

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

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

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

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

HTML
Create HTML markup to display tabs.

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

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

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

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