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. container - (element, optional) A container Element for the Fx.Accordion, to which new Elements will be added when using addSection.
4. 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 - (boolean: defaults to false) If set to true, displayed elements will have a fixed height.
• fixedWidth - (boolean: defaults to false) If set to true, displayed elements will have a fixed width.
• 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.

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);
    }
});