Accordify.js jQuery accordion plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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)


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

<script src=""></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>

Call the plugin:



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

		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