Responsive Accordion with jQuery and CSS3 – Accordable.js

The Accordable.js is a lightweight, cross-browser and fully responsive accordion built with jQuery. It helps you to create mobile-friendly accordion to toggle the contents. You can put almost all type of content in your accordion. Including images, videos, iframes etc.

In addition, this plugin can be fully customize with CSS and with its available options. It also supports jQuery easing plugin to use advanced easing transition modes.

Plugin Overview

Plugin: Accordable
Author: Jack Parker
Licence: MIT Licence
Published: June 12, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 9.65 KB

Main Features

  • Fully responsive, cross-browser and mobile friendly.
  • Fully customize-able with CSS.
  • Smooth CSS transitions. Likewise, it also support jQuery easing.
  • Built-in callback functions to execute.
  • It can hold any HTML element. For instance, iframes, images, scripts etc.

How to Build jQuery Responsive Accordion

1. Load the jQuery and Accordable‘s CSS and JavaScript files into HTML document to create accordion.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Accordion CSS -->
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">

<!-- Accordion Js -->
<script src="js/jquery.accordable.min.js"></script>

2. After that, create ul element for accordion structure and put your visible short headings & explained contents.

<ul id="my-accordion" class="accordable">
   <li>
      <span>Panel Heading One</span>
      <div>
         <p>You accordion contents goes here... </p>
      </div>
   </li>
   <li>
      <span>Panel Heading Two</span>
      <div>
         <p>You accordion contents goes here... </p>
      </div>
   </li>
   <li>
      <span>Panel Heading Three</span>
      <div>
         <p>You accordion contents goes here... </p>
      </div>
   </li>
</ul>

3. Finally, initialize the plugin (with all default settings) in jQuery document ready function to active the accordion.

$(document).ready(fnction(){

   $('#my-accordion').accordable();

});

4. If you want to add advanced easing transitions effects. So, load the easing plugin and add transition name in option (mentioned next).

<!-- jQuery Easing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.js"></script>

Advance Configuration Options for jQuery Responsive Accordion

The following are some advance configuration options to create / customize “Accordable accordion”.

Option Description, Default, Type
openPanel

Decide which accordion penal should be opened on body load. Default: [], Type: Array.
Therefore, pass number in array option to open selected panels.

$('#my-accordion').accordable({
   openPanel: [1, 2],
});
openAll

Decide weather to open all panels on body load. Default: false, Type: Boolean.
true to open all.

$('#my-accordion').accordable({
   openAll: true,
});
closeAll

Open one panel at a time, other opened items will be close if user clicks. Default: true, Type: Boolean.
False to disable.

$('#my-accordion').accordable({
   closeAll: true,
});
speed

Define the transition duration in milliseconds. Default: 300, Type: Number / int.

$('#my-accordion').accordable({
   speed: 400,
});
easing

Define the easing mode for transition. It requires jQuery easing plugin that must be included before using this option. Default: “swing”, Type: String.

$('#my-accordion').accordable({
   easing: 'swing',
});
addClasses

It allows to add class names to accordion elements for CSS styling. Default: true, Type: Boolean.

$('#my-accordion').accordable({
   addClasses: true,
});

Callback Functions for Accordion

You can also execute your own functions on accordion load, open and close. Therefore, all the available callback functions are as follows.

$('#my-accordion').accordable({

onLoad: function() {
   // Code to run on accordion/page load
}, 
		
beforeToggle: function() {
   // Code to run before accordion open
},
		
afterToggle: function() {
   // Code to run after accordion fires
}

});