Blog, PHP / MySQL

Einfaches Accordion mit jQuery

WordPress Entwickler und Webdesigner

Die jQuery Library ist eine der beliebtesten JavaScript Frameworks der Webwelt. Ich möchte euch im Laufe der Zeit langsam in die Funktionen des jQuery Frameworks einführen. Wir fangen mit einer der einfachsten Funktionen an die oft überschätzt wird. Das Accordion ist eine beliebte Möglichkeit um Content aufzugliedern und zu kategorisieren, oft werden hierzu schwere Geschütze in Form von 50-100kb großen Scripten aufgefahren. Doch dies ist in der Regel gar nicht nötig, denn wer sich sein kleines Accordion selber baut benötigt dazu nur ca. 8 Zeilen JavaScript bzw. jQuery Code.

Wie das genau funktioniert werde ich euch in diesem Beitrag zeigen bzw. ihr könnt es euch in der Podcast Folge 3 auch ansehen.

Anzeige:




Bootstrap 4 Kurs

Hier haben wir erst einmal den kompletten Code für das Accordion:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
a{display:block;}
-->
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){
	$('#acc div').slideToggle(0);
	$('#acc > a').click(function(){
		$('#acc div:visible').slideToggle('slow');
		$(this).next().slideToggle('slow');
		return false;
	});
});
//-->
</script>
</head>
 
<body>
<div id="acc">
    <a href="#">Test-1</a>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
<p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
 
<p> In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
 
<p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
 
<p> Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
 
<p> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>
    </div>
 
    <a href="#">Test-2</a>
    <div>
    <p>  Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
 
<p> Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?</p>
 
<p> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht?</p>
 
<p> Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
 
<p> Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?</p>
 
<p> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, </p>
    </div>
</div>
</body>
</html>

 

Die jQuery Funktion $(document).ready(); sorgt dafür, das der darin enthaltene Code erst dann ausgeführt wird, wenn der komplette DOM des HTML Dokumentes geladen ist

$(document).ready(function(){
	// Hier der auszuführende Code
});

 

Die Funktion $(‚#acc div‘).slideToggle(0); schließt alle div Container die in dem div#acc enthalten sind, ohne Animation und Zeitverzögerung.

Danach belegen wir die a Tags die dem div#acc direkt unterstellt sind mit der Funktion um die divs wieder aufzuklappen, dass funktioniert über die Funktion:

// Der > zwischen der Id #acc und dem a
// dient dazu das wirklich nur die a Tags belegt werden die der Id
// #acc direkt unterstellt sind
$('#acc > a').click(function(){
	// Hier der auszuführende Code bei klick auf das a
});

 

Die Funktion $(‚#acc div:visible‘).slideToggle(’slow‘); dient dazu, alle aktuell noch offenen divs (Selektor :visible) mit einer Animation zu schließen. Dieser Schnippsel wird allerdings nur dann benötigt, wenn in dem Accordion immer nur ein Div geöffnet sein soll, ansonsten könnt ihr auf diese Funktion verzichten.

Die Funktionskette $(this).next().slideToggle(’slow‘); müssen wir einwenig auseinander wurschteln um sie zu erklären:
$(this) : Selektiert den aktuell angeklickten a Tag
.next() : Springt zum nächsten HTML Tag der nach dem bereits selektierten Tag (durch $(this)) liegt, in unserem Fall wäre das der div mit dem Text
slideToggle(’slow‘) : Öffnet den div mit einer Animation

Zum Schluss fehlt uns nur noch eine Kleinigkeit undzwar das return false;, dieses bewirkt im zusammenhang mit der Klick-Funktion die wir auf das a gelegt haben nicht mehr als das, dass die URL die im href vermerkt ist nicht mehr aufgerufen wird.

Sollten noch unklarheiten zu den Funktionen vorhanden sein könnt ihr mir gerne eine Email schreiben bzw. eure Kommentare hinterlassen, des Weiteren kann ich euch noch die API Dokumentation der jQuery empfehlen.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.