Jquery Plugin
Accordion

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.

  • 4.5/5.0
  • Last updated 09 September, 2022
  • By Admin

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'
	});
});

I hope it can help you. Download source code here.