jQuery Accordion – Elemente auf- und zufahren lassen (slide toggle) und parallel das Icon austauschen

jquery-slide-toggle

Ich habe beim Aufräumen meiner Dropbox ein praktisches Snippet für einen Accordion-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden.
Ich habe eine Basis-Datei erstellt, die nur den elementaren Code der Funktion enthält. Zusätzlich habe die Demo optisch aufbereitet und ebenfalls als Download bereitgestellt. Das Mini-Script kann aber auch einfach kopiert und sofort eingesetzt werden.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Aufbereitete Demo

Zunächst einmal die mit CSS3 gestaltete Demo-Version. Diese Demo dient dazu den Effekt so zu zeigen wie ich ihn mir auch auf einer Website vorstellen kann. Achtet darauf, dass das Icon sich je nach Zustand verändert.

Der Download beinhaltet eine HTML-Datei und eine Mini-Sprite mit der Grafik des Buttons.

Dateien dieser Demo herunterladen

Basis-Version ohne Design

Wie eingangs erwähnt habe ich auch eine Basis-Version erstellt. Diese Datei enthält nur den Code der für die Funktion auch wirklich benötigt wird. Wenn ihr die Funktion also schnell einsetzen wollt, müsst ihr nicht erst ein gestaltetes Beispiel umbauen.

Der HTML- und JavaScript-Code des Beispiels sieht wie folgt aus: Das Grundgerüst bildet eine Definitionsliste. Innerhalb des Definition Term dt wird die Überschrift und der "Mehr lesen"-Link eingebunden. Die per CSS ausgeblendete Definition Definition dd beinhaltet den ausführlichen Text.

Per JavaScript wird bei einem Klick auf dt das nachfolgende dd-Element eingeblendet. Gleichzeitig wird die Klasse des a-Tags innerhalb von dt ausgetauscht. jQuery wird übrigens extern von Google eingebunden.

<body>
<dl>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("dt").click(function(){ // trigger 
		$(this).next("dd").slideToggle("fast"); // blendet beim Klick auf "dt" die nächste "dd" ein. 
		$(this).children("a").toggleClass("closed open"); // wechselt beim Klick auf "dt" die Klasse des enthaltenen a-Tags von "closed" zu "open". 
	});
});

</script>
</body>

Der CSS-Code des Beispiels ist ebenfalls sehr übersichtlich.

dd { display:none; }

.closed { background:red; }

.open { background:green; }

Der Download beinhaltet eine HTML-Datei in der alles enthalten ist.

Basis-Version herunterladen

Links / Quellen: