Accordify.js jQuery accordion plugin
JavaScript HTML CSS
Latest commit 321f5ef Dec 21, 2015 @deanzod Update README.md
Permalink
Failed to load latest commit information.
css
images
src
LICENSE
README.md
index.html

README.md

accordify.js - jQuery accordion plugin

Accordify.js is a simple barebones accordion plugin for jQuery with a few basic options. DEMO

Source files

  • src/accordify.js - Main js plugin file
  • css/style.css - Basic style for demo including icon rotation
  • index.html - Simple demo
  • images/plus-icon.png - example open icon (rotates 45 degrees for close)

Installation/Usage

Include the latest version of jQuery along with the plugin file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/accordify.js"></script>

Set a trigger class or id on your trigger element:

<h2 class="accordion-trigger">Trigger 1</h2>

Add the accordion class to the element that will be collapsed/expanded - this element should come immediately after the trigger element.

<ul class="accordion">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Call the plugin:

$('.accordion-trigger').accordify();

Options

Various options can be added to customise the accordion e.g.

    $('.accordion-trigger').accordify({
        singleOpen: true,
        openSpeed: 500,
        closeSpeed: 200
    });
Option Value Description
singleOpen true/false default: true - Setting to false will allow several accordions to be open at the same time
startOpen true/false default: false - Whether or not accordion is open or closed on page load
target string default: ".accordion" - The target element to be collapsed/epanded
activeClass string default "acActive" - The classname to be applied to active trigger element
openSpeed int default: 500 - The speed the accordion slides down
closeSpeed int default: 500 - The speed the accordion slides up
openIcon string (html) default: '<img src="images/plus-icon.png" />' This can be simple text e.g. "+" or html img tag
closeIcon string (html) default: "rotate" - This can be simple text e.g. "x" or html img tag, or "rotate". Setting it to rotate will rotate the openIcon if using an img