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