Simple jQuery Accordion Plugin with Arrows

A jQuery and CSS based plugin to create responsive, cross browser and mobile friendly simple accordion plugin with arrows. The plugin used the CSS transitions to smoothly expand and close accordion.

Plugin Overview

Plugin: accordion
Author: Victor Fernandez
Licence: MIT Licence
Published: March 21, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.11.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 11 KB

How to Use Accordion Plugin with Arrows:

1. To use this accordion plugin, load the jQuery, accordion js and CSS files into HTML document.


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

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

2. To create a simple accordion with arrows, build HTML structure like this.

    <section id="simple" data-accordion>
      <button data-control>Simple Accordion</button>
      <div data-content>
        <article>jQuery simple Accordion content goes here.. </article>

3. Active the plugin by calling with the selector $('#simple[data-accordion]') in jQuery document ready function.




4. Control the speed of transition when accordion will collapse. Default: 300 ms, type: int

transitionSpeed: 500,

5. The following option describe the CSS easing properties for transitions. Default: ease, type: string
Available options are all CSS easing properties.

transitionEasing: 'ease-in',

6. Decide weather to open a single accordion or others also. Default: true, type: bool

singleOpen: true,

7. CSS selector for the element acting as a button inside accordions. Type: string

controlElement: '[data-control]',

8. CSS selector for the element containing hide/show content.

contentElement: '[data-content]',

9. CSS selector for a parent element containing a group of accordions.

groupElement: '[data-accordion-group]',

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.