Accordion.js

Accordion.js is a lightweight and simple plugin based on jQuery.

Supports IE7+ and modern browsers and support jQuery version >= 1.7.x.

Getting Started

Package Manager:

bower install --save accordion-js

Usage:

$('.accordion').accordion();

For a simple accordion/dropdown, use the following structure:

<div class="accordion">
 <div class="accordion-control">...</div>
 <div class="accordion-content">
  // content
  // content
 </div>
</div>

Helper Class

Use figures to display the states of the accordion.

Simple example of use of class .opened

.accordion-control {
 background-image: url('plus.svg');
}

.accordion-control.opened {
 background-image: url('minus.svg');
}

Demo

1º Title Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere voluptatem ratione accusamus, explicabo maxime, tempore rem ut, dicta enim aliquam aperiam nihil. Iste facilis error quos? Similique, hic eaque reprehenderit.

2º Title Accordion

3º Title Accordion

4º Title Accordion

Settings

controlElement

Element that will act as a button.

type: element
default: $('.accordion-control')

contentElement

Element that contains hide/show content.

type: element
default: $('.accordion-content')

transitionSpeed

Transition speed on miliseconds.

type: int
default: 400

ease

The type of "easing" to use during transitions. [Try out the demo]

type: string
default: 'swing'

multipleCollapse

Sets the number of collapse to be opened. [Try out the demo]

type: boolean
default: true

Callbacks

onOpened

Executes immediately after the accordion is fully opened. [Try out the demo]

type: function() {}
options: function(el) { // your code here }
argument:
 el: current element clicked.

onClosed

Executes immediately after the accordion is fully closed. [Try out the demo]

type: function() {}
options: function(el) { // your code here }
argument:
 el: current element clicked.

Designed and built by: Max Oliveira.