YUI accordion

Files needed

For this snippet you need the files: yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1).

Code

To use this snippet add a class "accordion" to a defenition list. The setup of an accordian object is:


<dl class="accordion">
	<dt>title 1</dt>
		<dd class="open">
			<div class="bd">
				content of accordion pane #1
			</div>
		</dd>

	<dt>title 1</dt>
		
		<dd class="open">
			<div class="bd">
				content of accordion pane #2
			</div>
		</dd>
	</dt>
</dl>

The "DT" will be converted to the clickable headers. The "DD" will be used for the accordion item content. Add a class "open" to an "DD" element which should be open on startup.

Call the main function by putting the code below in a initPage function:

YAHOO.lutsr.accordion.init(true,10,true);

The first parameter sets the animation on/off (default = true), the second represents the ammount of frames the animation should take (default = 10), the last defines if there could be more than one item open at once (default = true).

Example

title 1: Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.
title 2: Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.
title 3: Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.

Just another accordion

title 1: Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.
title 2: Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.
title 3: Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus.