Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A Prototype based Javascript Accordion class.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 javascripts
Octocat-spinner-32 stylesheets
Octocat-spinner-32 LICENSE
Octocat-spinner-32 README.textile
Octocat-spinner-32 index.html
README.textile

Prototype Accordion

Dependencies

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.
Something went wrong with that request. Please try again.