Jquery Multi Level Accordion script is powerful and lightweight at only 1.2kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. I have reverted the markup to a div based structure to eliminate any validation issues with the definition tables in the previous version. Check back for more posts and scripts soon.

To initialize an accordion use the following code:

1 var accordion=new TINY.accordion.slider('accordion'); 

2 accordion.init('accordion','h3',0,0,'selected');

You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion "ul", the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available. Paid support is also available, contact me for details.

Update 6/16/2009

The script has been updated with a couple bug fixes, performance tweaks, and feature requests. I also shaved off 0.2KB.

You can now expand a particular section by its index, for example parentAccordion.pr(0,1), with the second parameter being the index of the section. If you don't want any section to be expanded by default then use -1 for the initially expanded index in the initialization function, example accordion.init("accordion","h3″,0,-1,"selected"). The script is also no longer tied to a strict doctype. If you are using this along with Flash, be sure to set the wmode property on the SWF object.

Live Demo

Download Source Code

Leave your comments