A new version of this script is available here.

This lightweight (1.16 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th. It is now smaller, faster, supports multiple instances and includes an active header class toggle. The markup is also improved through the use of definition lists and the CSS has been simplified as well.

To initialize an accordion use the following code:

var mySlider=new accordion.slider('mySlider');
mySlider.init('slider',0,'open');

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 3 parameters: the id of the “dl”, 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 here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

Update 11/24/2008 – Updated logic to allow hover state when no sections are initially expanded. Consolidated some code to drop the weight by 15%.