Auf der Seite von Mootools gab es einmal einen Accordion-Effekt, der allerdings nicht von oben nach unten, sondern links nach rechts verlief. Leider ist er dort verschwunden und die vielen jQuery-Plugins, die es schon gibt, waren mir entweder zu umständlich, oder hatten nicht funktioniert, oder passten einfach nicht. Deshalb habe ich mein eigenes geschrieben.

Beispiel 1

Fahre mit der Maus in die Flächen, um die "gehoverte" Fläche zu vergrößern und die anderen zu verkleinern:

• Tab 1
  

  Inhalt von Tab 1

• Tab 2
  

  Inhalt von Tab 2

• Tab 3
  

  Inhalt von Tab 3

Beispiel 2 (mit offenem Element)

In diesem Fall hat das linke LI-Tag die Klasse "active" bekommen, was bewirkt, dass dieses Element standardmäßig geöffnet ist, wenn die Maus sich nicht im Menü-Container (hier UL) befindet:

• Tab 1
  

  Tab 1 - geöffnet

• Tab 2
  

  Inhalt von Tab 2

• Tab 3
  

  Inhalt von Tab 3

Statt UL mit LIs kann auch ein Div-Container mit Div-Kindern verwendet werden. Das Plugin erkennt automatisch den Typ des ersten Kind-Elements im Container und geht davon aus, dass alle weiteren Elemente im Container auch Kindelemente desselben Typs sind.

DOWNLOAD

HTML-Code:

<ul id="hordion">
  <li class="active">
    <a href="#">Tab 1</a>
 
    <p>Inhalt von Tab 1</p>
  </li>
  <li>
    <a href="#">Tab 2</a>
 
    <p>Inhalt von Tab 2</p>
  </li>
  <li>
    <a href="#">Tab 3</a>
 
    <p>Inhalt von Tab 3</p>
  </li>
</ul>

CSS-Layout:

ul#hordion{
  margin: 0px;
  padding: 0px;
  width: 400px; /* MUSS angegeben werden. */
  height: 75px; /* sollte angegeben werden. */
}
ul#hordion *{
  margin: 0px;
  padding: 0px;
}
 

Javascript:

$(function(){
    var options = {
    speed: 500,  // Dauer der Animationen in msec
    max: 250,  // Breite des aufgeklappten Elements in Pixeln
    easing: "easeOutBounce" // benötigt jQuery Easing-Plugin
    activeClass: "active" // Das LI-Element (oder Div) mit der
// Klasse "active" ist offen, wenn die Maus nicht im Container ist.
    };
    $("ul#hordion").hordion(options); // Der Parameter ist optional.
});