Prototype Accordion

View the Prototype Accordion demo

Dependencies

• Prototype
• Scriptaculous Effects.js

Usage

new Accordion('id');
var options = {
  classNames: {
    section: 'accordionSection',
    title: 'accordionTitle',
    toggle: 'accordionToggle',
    expanded: 'accordionExpanded'
  }
};
new Accordion('anotherId', options);

Options

Option	Type	Default Value	Description
cancelEvent	Boolean	true	When the title element is clicked, if this option is set to true, will cancel the event, therefore preventing the anchor to load a new page or modify the address bar.
classNames	Object	{ section: ‘section’, title: ‘title’, toggle: ‘toggle’, expanded: ‘expanded’ }	Allows you to use custom CSS class names to describe the elements used.
mutuallyExclusive	Boolean	true	If this is set to false, multiple sections can be visible at the same time.
effectDuration	Number	.3	The duration of the underlying BlindUp/BlindDown Scriptaculous effects.

Options: classNames

Name	Type	Default Value	Description
section	String	‘section’	A CSS class on the element that contains the title and the toggle element.
title	String	‘title’	A CSS class on the element that is clicked to show or hide sections.
toggle	String	‘toggle’	A CSS class on the element that is to be shown or hidden when the title element is clicked.
expanded	String	‘expanded’	A CSS class that is on the section element when the section is expanded.

Custom Events

An instance of the main Accordion class fires custom events that you can hook into. The id is the id of the root accordion element that is passed to the Accordion class as the first argument.

Accordion Custom Event Name	Description	Event Memo
id + ‘:initialized’	Fired when the class initializes.	Contains a reference to the accordion instance.
id + ‘:clicked’	Fired when a section title is clicked.	Contains a reference to the accordion instance.

The AccordionSection class also fires custom events that you can hook into.

AccordionSection Custom Event Name	Description	Event Memo
id + ‘:hidden’	Fired when a section is hidden.	Contains a reference to the accordion instance and the related section. Occurs at the end of the effect duration.
id + ‘:shown’	Fired when a section is shown.	Contains a reference to the accordion instance and the related section. Occurs at the end of the effect duration.