Accordify.js jQuery accordion plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
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