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: June 17, 2023
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.

<!--jQuery-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<!--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>
        <article>Item</article>
        <article>Item</article>
        <article>Item</article>
        <article>Item</article>
        <article>Item</article>
      </div>
    </section>

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

$(document).ready(function(){

 $('#simple[data-accordion]').accordion();

});

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

$('#simple[data-accordion]').accordion({
transitionSpeed: 500,
});

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

$('#simple[data-accordion]').accordion({
transitionEasing: 'ease-in',
});

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

$('#simple[data-accordion]').accordion({
singleOpen: true,
});

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

$('#simple[data-accordion]').accordion({
controlElement: '[data-control]',
});

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

$('#simple[data-accordion]').accordion({
contentElement: '[data-content]',
});

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

$('#simple[data-accordion]').accordion({
groupElement: '[data-accordion-group]',
});

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X