Animated JavaScript Accordion V2

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.

On a side note, you may have noticed that I have not posted in over 4 months. I have moved from Colorado to North Alabama and am now working for Summit Technology focusing on SharePoint development. This change has really taken a lot of my time and hopefully now I will be able to post again. I will begin by updating many of my existing scripts.

If I have not responded to an email you have sent I apologize. I will try and get to them all in time. I will now be taking donations (via PayPal at [email protected]) and accepting a few advertisers to support my time here. Unfortunately, due to the massive amount of email I get, I will not longer be offering any free support via email. Please contact me if you are interested in paid support.

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).

There is no other JavaScript that needs to be added to the HTML. The init function parses the definition list and adds the appropriate mouse events to the headings. This has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to [email protected] with the title “BUG REPORT”. This script is available for any personal or commercial projects.

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%.

This entry was posted in accordion, expanding, JavaScript, slider, sliding, Syndicated. Bookmark the permalink.

Comments are closed.