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'));
execute this code

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)

mootorial/08-plugins/03-interface/04-accordion.txt · Last modified: 2008/10/27 23:53