Sandbox

Description

The semantic accordion is a simple lightweight alternative that uses the structure of a definition list <dl> to provide a collapsible list of elements.

The plugin should be passed a definition list containing pairs of term <dt> and description <dd> elements.

Options

• startclosed (default true) – this specifies whether the accordion should start closed or whether the first item should be displayed.
• collapse (default true) – this determines whether the accordion is able to collapse or whether one item should always remain visible.

• selectedclass (default 'selected') – the class assigned to the selected <dt>.

Usage – basic example

$('dl.accordion').accordion();

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel enim. Aenean eu nisl at lorem tincidunt consequat. Aliquam sagittis magna sit amet mi.

Item 2

Morbi magna. Nullam fermentum dictum metus. Fusce vulputate pharetra mauris. Nunc orci quam, malesuada non, ullamcorper id, ullamcorper ut, augue.

Item 3

Quisque sapien. Fusce euismod dictum sem. Fusce sed ligula quis urna imperdiet adipiscing. Nulla consectetur. Duis ante lectus, ornare ac, auctor eu, pharetra sed, lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 4

Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Usage – custom example

$('dl.news').accordion({startclosed: false, collapse: false, selectedclass: 'open'});

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel enim. Aenean eu nisl at lorem tincidunt consequat. Aliquam sagittis magna sit amet mi.

Item 2

Morbi magna. Nullam fermentum dictum metus. Fusce vulputate pharetra mauris. Nunc orci quam, malesuada non, ullamcorper id, ullamcorper ut, augue.

Item 3

Quisque sapien. Fusce euismod dictum sem. Fusce sed ligula quis urna imperdiet adipiscing. Nulla consectetur. Duis ante lectus, ornare ac, auctor eu, pharetra sed, lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 4

Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Notes

While it is valid to use multiple term <dt> tags with a single description, or multiple description <dd> tags for a single term, this plugin expects and requires a single term tag followed by a single description tag.

		<dl>
		   <dt>Title</dt>
		   <dd>Description</dd>
		   <dt>Title</dt>
		   <dd>Description</dd>
		</dl>
		

The usage examples above employ CSS to set the <dd> tags to display:none before the plugin is able to load and perform this task. While this improves the appearance of the page while loading it means that users who have CSS enabled but JavaScript disabled will not be able to see the content – this should be avoided.

Since the pseudo-class :hover is not supported by all browsers, the <dt> are assigned the class 'hover' on mouseover to assist in styling the accordion.

This plugin is designed to be lightweight—791bytes—if you are looking for something with additional features, such as easing, try the jQuery UI.