The Fx.Accordion class creates a group of Elements that are toggled when their handles are clicked. When one Element toggles into view, the others toggle out.

• Fx.Accordion requires the page to be in Standards Mode.
• 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.

Fx.Elements

var myAccordion = new Fx.Accordion(togglers, elements[, options]);

1. togglers - (array) The collection of Elements which will be clickable and trigger the opening of sections of the Fx.Accordion.
2. elements - (array) The collection of Elements the transitions will be applied to.
3. options - (object, optional) All the Fx options in addition to options below.

• display - (integer: defaults to 0) The index of the element to show at start (with a transition). To force all elements to be closed by default, pass in -1.
• show - (integer: defaults to 0) The index of the element to be shown initially.
• trigger - (string: defaults to 'click') The event that triggers a change in element display.
• height - (boolean: defaults to true) If set to true, a height transition effect will take place when switching between displayed elements.
• width - (boolean: defaults to false) If set to true, it will add a width transition to the accordion when switching between displayed elements. Warning: CSS mastery is required to make this work!
• opacity - (boolean: defaults to true) If set to true, an opacity transition effect will take place when switching between displayed elements.
• fixedHeight - (number) If set, displayed elements will have a fixed height equal to the specified value.
• fixedWidth - (number) If set, displayed elements will have a fixed width equal to the specified value.
• alwaysHide - (boolean: defaults to false) If set to true, it will be possible to close all displayable elements. Otherwise, one will remain open at all time.
• initialDisplayFx - (boolean; defaults to true) If set to false, the initial item displayed will not display with an effect but will just be shown immediately.

• (object) A new Fx.Accordion instance.

• (function) Function to execute when an element starts to show.

onActive(toggler, element)

1. toggler - (element) The toggler for the Element being displayed.
2. element - (element) The Element being displayed.

• (function) Function to execute when an element starts to hide.

onBackground(toggler, element)

1. toggler - (element) The toggler for the Element being displayed.
2. element - (element) The Element being displayed.

var myAccordion = new Fx.Accordion($$('.togglers'), $$('.elements'), {
    display: 2,
    alwaysHide: true
});

• Fx.Accordion - http://demos.mootools.net/Accordion

Dynamically adds a new section into the Fx.Accordion at the specified position.

myAccordion.addSection(toggler, element);

1. toggler - (element) The Element that toggles the Fx.Accordion section open.
2. element - (element) The Element that should stretch open when the toggler is clicked.

• (object) This Fx.Accordion instance.

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.

myAccordion.removeSection(toggler, [displayIndex]);

1. toggler - (element) The toggler element to detach the behavior from.
2. displayIndex - (integer; 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).

• (object) This Fx.Accordion instance.

Shows a specific section and hides all others. Useful when triggering an accordion from outside.

myAccordion.display(index);

1. index - (mixed) The index of the item to show, or the actual element to be displayed.

• (object) This Fx.Accordion instance.

// Make a ticker-like accordion. Kids don't try this at home.
var myAccordion = new Fx.Accordion('.togglers', '.elements', {
    onComplete: function(){
        this.display.delay(2500, this, (this.previous + 1) % this.togglers.length);
    }
});

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.

myAccordion.detach([toggler]);

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

• (object) This Fx.Accordion instance.