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 Preview

Responsive Accordion with jQuery and CSS3 - Accordable.js

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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. EXAMPLE $('#my-accordion').accordable({ openPanel: [1, 2], });
`openAll`	Decide weather to open all panels on body load. Default: false, Type: Boolean. true to open all. EXAMPLE $('#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. EXAMPLE $('#my-accordion').accordable({ closeAll: true, });
`speed`	Define the transition duration in milliseconds. Default: 300, Type: Number / int. EXAMPLE $('#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. EXAMPLE $('#my-accordion').accordable({ easing: 'swing', });
`addClasses`	It allows to add class names to accordion elements for CSS styling. Default: true, Type: Boolean. EXAMPLE $('#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
}

});

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Responsive Accordion with jQuery and CSS3 – Accordable.js