Prototype Accordion

Dependencies

• Prototype 1.6+
• Scriptaculous Effects.js

Example Usage

View the Prototype Accordion demo

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.
disabled	Boolean	false	Controls wether or not an accordion’s interactivity is disabled when it is initialized.

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.

Disabling Accordions

The accordion and it’s sections have the ability to be disabled using the disable() method. This method is available on the main accordion object and it’s section objects.

• If an entire accordion is disabled, a CSS class of ‘disabled’ is applied to the root element.
• If an accordion section is disabled, a CSS class of ‘disabled’ is applied to the corresponding section element.

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.
id + ‘:disabled’	Fired when an accordion is disabled.	Contains a reference to the accordion instance.
id + ‘:enabled’	Fired when an accordion is enabled.	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.
id + ‘:disabled’	Fired when an accordion section is disabled.	Contains a reference to the accordion instance and the related section.
id + ‘:enabled’	Fired when an accordion section is enabled.	Contains a reference to the accordion instance and the related section.