Simple jQuery Accordion Plugin

January 04, 2020 No comments jQuery Accordion Plugin Simple

1. Introduction

jquery-accordion is a jQuery and CSS plugin for responsive and cross-browser accordion components. The plugin uses CSS transitions to animate opening and closing, supports IE9+ and all modern browsers. With a little configuration and JS code, it can be integrated with any project.

Jquery simple accordion plugin

2. Plugin Overview

Library jquery-accordion
Author Victor Fernandez
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.11.1 or Latest version

Demo

3. How to install and use jquery-accordion jQuery plugin

Follow the below steps to install jquery-accordion jQuery plugin on your website.

1. Include the jQuery and jquery-accordion assets (CSS and JavaScript files):

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

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

<!--Accordion CSS-->
<link rel="stylesheet" href="css/jquery.accordion.css">

2. Create a sipmle HTML structure:

<div data-accordion>
    <div data-control>Control</div>
    <div data-content>
        <div>Row</div>
        <div>Row</div>
        <div>Row</div>
    </div>
</div>

or more complex one:

<div data-accordion-group>
    <div class="accordion" data-accordion>
        <div data-control>Control</div>
        <div data-content>
            <div>Row</div>
            <div>Row</div>
            <div>Row</div>
        </div>
    </div>
    <div class="accordion" data-accordion>
        <div data-control>Control</div>
        <div data-content>
            <div>Row</div>
            <div>Row</div>
            <div>Row</div>
        </div>
    </div>
</div>

4. Initialize the jquery-accordion plugin:

$('.accordion').accordion({
    "transitionSpeed": 400
});

4. Conclusion

In this article, we presented jquery-accordion jQuery plugin used to create fully responsive accordion components. Easily to configure and integrate with any website. The plugin allows customizing the presence by changing CSS styles.

{{ message }}

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