A fully responsive jQuery accordion plugin

January 04, 2020 No comments jQuery Accordion HTML

1. Introduction

Accordion.js is a jQuery lightweight plugin used to create a responsive accordion. It allows you to use multiple instances on a single page and works in IE8 and all modern browsers. The plugin is easy to customize with your CSS styles and supports jQuery easing for panel transitions.

Responsive accordion with jquery

2. Plugin Overview

Library Accordable.js
Author Jack Parker
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version

Demo

3. How to install and use Accordion.js jQuery plugin

Follow these steps to install Accordion.js plugin.

1. include jQuery library with easing script (optional for easing transitions):

<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- jQuery easing (optional for easing transitions) -->
<script type="text/javascript" src="jquery.easing.1.3.min.js"></script>

2. include Accordion.js file:

<!-- accordable.js -->
<script type="text/javascript" src="jquery.accordable.min.js"></script>

3. create accordion using the following structure:

<ul id="element-id">
    <li>
        <span>Panel Heading One</span>
        <div>Body copy goes here...</div>
    </li>
    <li>
        <span>Panel Heading Two</span>
        <div>Body copy goes here...</div>
    </li>

    <!-- etc. -->

</ul>

4. final step is to call the function to initialize the plugin:

(function(){

    $('#element-id').accordable();

})();

Accordion.js plugin transforms this specific structure into a fully-functional accordion with all necessary event handlers attached.

4. Conclusion

In this article, we presented a Accordion.js jQuery plugin that allows you to create a mobile-friendly accordion. The plugin is easy to integrate and customize. You can put as many instances on your website as you want.

{{ message }}

{{ 'Comments are closed.' | trans }}