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

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.

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)