Skip to content

Latest commit

 

History

History
52 lines (37 loc) · 2.51 KB

README.textile

File metadata and controls

52 lines (37 loc) · 2.51 KB

Prototype Accordion

View the Prototype Accordion demo

Dependencies

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.