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: | 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 |
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.
$('#my-accordion').accordable({
openPanel: [1, 2],
});
|
openAll |
Decide weather to open all panels on body load. Default: false, Type: Boolean.
$('#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.
$('#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
}
});
Similar Code Snippets:
Accordion using Material Design and Bootstrap
JavaScript Accordion with Plus Minus
Accordion Sidebar Menu with CSS and jQuery
Create Nested Accordion with jQuery BeefUp Plugin
JavaScript Accordion with Smooth Transition
JavaScript FAQ Accordion Code with Example
JavaScript Accordion with Arrow
Nested Accordion With Checkboxes Inside
jQuery Accordion Plugin Expand all / Open one at a Time
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.