Demo

Notes

Fx.Accordion elements will have their paddings and borders removed in order to make the transition display correctly. Best practice is to use the accordion elements as containers for elements that are styled exactly as you like.

Syntax

Arguments

element - (element) The Element that should stretch open when the toggler is clicked.

Returns

(object) This Fx.Accordion instance.

Examples

var myAccordion = new Fx.Accordion($$('.togglers'), $$('.elements'));
myAccordion.addSection('myToggler1', 'myElement1'); // add the section at the end sections.
myAccordion.addSection('myToggler2', 'myElement2', 0); //add the section at the beginning of the sections.

Detaches the toggle behavior from the DOM specified elements. If that element is expanded, it shows another (either the previous item, the next item if there is no previous one, or one you specify). Does not remove the elements from the DOM.

Syntax

myAccordion.removeSection(toggler, [displayIndex]);

Arguments

toggler - (element) The toggler element to detach the behavior from.

displayIndex - (number; optional) The section to display next (note that this index is based on the exclusion of the removed section, so if you remove the first section at index zero, then want to show the third one, you would specify index 1 - the second item in the accordion after the removal of the first).

Detaches the toggle behavior from the DOM element(s). If a single element is specified, it detaches only the toggle behavior, but the accordion still works for that element (if, for example it is expanded, clicking on another section will shrink as the other grows). If no element is specified, this method disables the accordion.

Syntax

myAccordion.detach([toggler]);

Arguments

toggler - (element; optional) The toggler element to detach the behavior from; if not specified, detaches all togglers.