Accordion Script With Multi-Level Support

This updated accordion script is powerful and lightweight at only 1.4kb. 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.


To initialize an accordion use the following code:

var accordion=new TINY.accordion.slider("accordion");
accordion.init("accordion","h3",false,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).

There is no other JavaScript that needs to be added to the HTML. The init function parses the unordered list and adds the appropriate mouse events to the headings as provided. This has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

Click here for the demo

Click here to download the source code