201028Sep

jQuery Easy Accordion: Für horizontale Bereiche

Mittlerweile gehören Accordion-Menüs zu der Grundausstattung einer modernen Website: Dadurch lassen sich relativ viele Inhalte in einer kompakten Form darstellen und zudem animieren. Die gängigste Form des Accordions stellt die vertikale Variante dar, bei der die Inhalte und Schaltflächen untereinander angeordnet sind.
Wer für ein Projekt eine horizontale jQuery-Lösung, ist mit dem Easy Accordion gut beraten. Das Plugin wird auf eine Definitionsliste (dt) angewendet und lässt sich in seiner Animation anpassen.

jQuery Easy Accordion Plugin

Auf der Demo-Seite findet sich eine lauffähige Funktion des Skriptes. Die Implementierung funktioniert wie folgt:

  • HTML-Code:
  • <div id="accordion-container">
  • <dl>
  • <dt>Titel</dt>
  • <dd>Inhalt</dd>
  • <dt>Titel</dt>
  • <dd>Inhalt</dd>
  • </dl>
  • </div>
  •  
  • jQuery-Code:
  • $("#accordion-container").easyAccordion({
  • autoStart: false,
  • slideInterval: 2000
  • });

Das Plugin hat unkomprimiert eine Größe von etwa 8 KB und funktioniert in allen gängigen Browsern (Internet Explorer ab Version 6). Alternativ wurde aktuell noch ein Accordion für Prototype bzw. Script.aculo.us veröffentlicht. Das Skript nennt sich "Accordion v2.0" und steht auf der Demo-Seite zum Download bereit. Es bietet neben vertikalen und horizontalen Bereichen auch verschachtelte (nested) Accordions.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong