Toggle-Boxen mit jQuery

Heute geht es darum, wie man mit Hilfe der freien, browserübergreifenden JavaScript-Bibliothek jQuery sehr ansprechende Toggle-Boxen bauen kann. Diese Anleitung  soll zugleich ein Einstieg-Tutorial für jQuery sein.

Schritt 1: jQuery laden

Zunächst benötigen wir jQuery. Man kann jQuery hier herunterladen und einbinden oder direkt aus der Google Ajax-API einbinden. Letzteres schauen wir uns später an.

Schritt 2: der HTML-Code

Zunächst laden wir alle nötigen Dateien herunter. In diesem ZIP-Archiv ist auch eine HTML-Datei als Beispiel enthalten. Diesen HTML-Code schauen wir uns hier genauer an:

Die erste ungewöhnliche Zeile ist Zeile Nr. 7. Das hier eingebundene Script ist die Google Ajax-API. Mit Hilfe dieser API können wir jQuery laden.

Die Zeilen 12 bis 19 bilden das Konstrukt der ersten toggleBox. Wichtig dabei sind folgende Eigenschaften:

• Der Container für die Toggle-Box enthält die Klasse toggleBox
• Der Button, welcher die Box öffnen und schließen soll, enthält die Klasse toggle und eine ID, die mit toggle_ startet, gefolgt von dem Namen den wir unserer Box geben.
• Die eigentliche Box, die den Inhalt enthält muss die Klasse toggleContent enthalten und eine ID, die mit content_ startet, gefolgt von dem Namen, den wir bei dem Button schon vergeben haben. Hier ist wichtig, das der Name genau übereinstimmt, da unser Script sonst keine Verbindung zwischen Box und Button erkennt.

Das wars auch schon. Diese Toggle-Boxen lassen sich nun auch noch mit Hilfe von CSS an die Bedürfnisse des Projekts anpassen. Widmen wir uns nun dem JavaScript-Code.

Schritt 3: Der JavaScript-Code

Den Java-Script-Code finden wir in der Datei toggle.js . Es ist nicht viel, da uns jQuery hier viel Arbeit abnimmt.

Mit dieser Zeile laden wir jQuery, so einfach kann es sein.

Hier definieren wir eine Callback-Funktion. Diese Funktion wird aufgerufen, wenn jQuery fertig geladen wurde. Diese Funktion heißt hier init. Diese Funktion wird in den den folgenden Zeilen definiert.

In Zeile 4 startet die Funktion init().
In Zeile 6 suchen wir alle Elemente mit der Klasse .toggleContent und definieren mit each eine Funktion, die auf jedes einzelne dieser Elemente angewendet wird.
In Zeilen 7 ermitteln wir die Höhe, die diese Elemente einnehmen und weisen sie als CSS-Höhe dem Element zu. Dieser Vorgang scheint sinnlos, ist er aber nicht. Hat die Box, die wir später öffnen und schließen wollen keine Höhe, kann vorkommen, das es zu Sprüngen in der Animation kommt. Also weisen wir die Höhe explizit zu.
In Zeile 8 machen wir die verstecken wir die Box, denn wir möchten, das die Box beim Start geschlossen ist.

In Zeile 11 definieren wir eine Click-Funktion für die Klasse toggle. Diese Funktion wird immer dann ausgeführt, wenn wir auf ein ein Element klicken, welches die Klasse toggle aufweisst. In unserem Beispiel sind das unsere Buttons. In Zeile 20 wird diese Funktion abgeschlossen.
In Zeile 12 schauen wir nach, welche ID der geklickte Button hat (z.B. toggle_news) und ersetzen „toggle_“ durch „content_“ (im Beispiel wird also toggle_news zu content_news) und speichern das Resultat in der Variable contentBoxId.
In Zeile 13 suchen wir nach einem Element, welches die in contentBoxId gespeicherte ID aufweisst und speichern dieses Element in contentBox.
In Zeile 14 sagen wir nichts weiter als: Wenn die in contentBox gespeicherte Box geschlossen ist öffne sie animiert, wenn sie offen ist schließe sie animiert. Das ist also genau das was wir erreichen möchten.
In den Zeilen 15-19 wird lediglich unser Pfeil geändert, welcher ganz links im Button zu sehen ist.

Wir sind am Ziel angekommen. Unsere Toggle-Box ist fertig.