This is a simple Accordion UI control, which converts a group of specified elements into members of an accordion-type interface. You can test it out at the demo page.

Needs the JQuery framework.

Usage and Implementation

new Accordion(elements, options);

elements : Array of IDs of elements to be converted into the accordion control options : Object of properties to be set

The options that you can set are:

Property	Value	Description
maxHeight	Integer	Maximum height of the accordion. Equal to minHeight in a horizontal accordion
minHeight	Integer	Minimum height of an element in the accordion.
maxWidth	Integer	Maximum width of the accordion. Equal to minWidth in a vertical accordion
minWidth	Integer	Minimum width of an element in the accordion.
skip	String	Comma-separated list of element selectors to skip hiding when collapsing a child
direction	Character	‘h’ or ‘v’ for horizontal or vertical

Example code:

new Accordion(new Array('wrap1', 'wrap2', 'wrap3'), {maxwidth:'600', minwidth:'100', minheight:'100', direction:'h', skip: '.visible'});

Converts elements with IDs wrap1, wrap2 and wrap3 into accordion children. The maximum width of the entire accordion section will be 600 pixels, and the width of a collapsed child will be 100 pixels. The height of the section will be 100 pixels, and this will be a horizontal accordion. Elements with ‘visible’ class-name will not be hidden when elements are collapsed.

Known issues and bugs

1.0 →

Implementing more than one accordion on one page messes up all, except the last one.

Downloads

Accordion JS (3.16kb)
Accordion JS (compressed) (1.88kb)