Multi-Level Accordion Script: TinyAccordion

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. Check back for more posts and scripts soon.

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. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects. SORRY, NO FREE SUPPORT PROVIDED.

I apologize If I have not responded to emails you may have sent. I get many emails each day and simply do not have time to answer all of them nor can I neglect my paying clients. Please contact me if you are interested in paid support otherwise a support forum will be available very soon for community support.

Click here for the demo.

Click here to download the source code.