Accordion

Here is the documentation for Accordion.js.

Accordions are probably the widget most associated with MooTools (and its earlier incarnation as Moo.fx). These widgets take an ordered list and condenses them showing the details of one item at a time. Here's an example of an accordion:

first section

I'm the content for the first section.

second section

I'm the content for the second section.

third section

I'm the content for the third section.

Here's what you do to make one work. The html I'm using:

<dl class="AccordionMulti" id="accordionExample">
  <dl>
    <dt class="stretchtoggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="stretchtoggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="stretchtoggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
  </dl>
</dl>

Here's that HTML actually rendered:

first section

I'm the content for the first section.

second section

I'm the content for the second section.

third section

I'm the content for the third section.

Now execute this code and you'll see it change to be interactive.

new Accordion($$('dl#accordionExample dt'), $$('dl#accordionExample dd'));

Accordion takes as arguments:

elements

required, a collection of elements the transitions will be applied to.

togglers

required, a collection of elements, the elements handlers.

options

optional, see options below, and //Fx.Base// options.

show

integer, the Index of the element to show at start.

display

integer, the Index of the element to show at start (with a transition).

fixedHeight

integer, if you want your accordion to have a fixed height. defaults to false.

fixedWidth

integer, if you want your accordion to have a fixed width. defaults to false.

onActive

function to execute when an element starts to show

onBackground

function to execute when an element starts to hide

height

boolean, will add a height transition to the accordion if true. defaults to true.

opacity

boolean, will add an opacity transition to the accordion if true. defaults to true.

width

boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!

alwaysHide

allows you to close every item (defaults to false)