Anzeige
Tutorialbeschreibung

Accordeon mit jQuery

Accordeon mit jQuery

In diesem Beispiel soll eine Liste so gestaltet werden, dass beim Betreten der Seite nur die Überschriften zu sehen sind und die dazugehörigen Texte beim Klick auf die Überschrift erscheinen.
Für Seitenbesucher, die kein Javascript aktiviert haben, soll diese Liste jedoch auch komplett lesbar sein.
(Demo twoiback.de/PSD/faq/)


1.
Als Erstes habe ich in meinem Html-Dokument eine Liste mit meinen Punkten (wie z.B. eine kleine FAQ) erstellt, und zwar so, dass in jedem Listenpunkt eine Überschrift <h3> und ein Textabsatz <p> notiert ist:

<ul id="faq">
  <li>
    <h3>Überschrift</h3>
    <p>Textabsatz</p>
  </li>
  <li>
    <h3>Überschrift</h3>
    <p>Textabsatz</p>
  </li>
  /* weitere listenpunkte */
</ul>


2.
Im head-Bereich der Seite binde ich nun die jQuery-Bibliothek ein, indem ich sie einfach von der GoogleApis-Seite lade:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Darunter lege ich nun einen script-Bereich für mein eigentliches Script an:
<script type="text/javascript">

</script>

3.
In der typischen Weise legen wir nun die Methode an, die die Funktionalität ausführt, wenn das Dokument geladen ist (das heißt hier: der Dom des Dokuments).

$(document).ready(function(){

});


4.
In der Seite wollen wir berücksichtigen, dass es auch Besucher gibt, die Javascript möglicherweise deaktiviert haben. Deswegen wird das Ausblenden der <p>-Bereiche über das Script geregelt.
Über die Function css() haben wir Zugriff auf das CSS der ausgewählten Elemente. Mit dem Selektor $("#faq p") können wir alle <p> innerhalb von #faq auswählen und das CSS so zuweisen:
$(document).ready(function(){
  $("#faq p").css({"display":"none"});
});

5.
Die Überschriften sollen die Funktionalität erhalten, dass sie beim Anklicken das <p>-Element, das der angeklickten Überschrift folgt ( next() ), mit der gewählten Methode sichtbar macht.
Hier stellt jQuery eine Reihe von Animationen zur Verfügung. In diesem Beispiel beschränken wir uns zunächst auf slideUp() und slideDown(). Letzteres blendet unser p ein:
$("#faq h3").click(function(){
  $(this).next().slideDown(500);
});
Bilder


6.

Damit beim Klick auf das nächste Überschriften-Element das vorherige auch wieder geschlossen wird, erweitern wir diese Funktion noch um das Schließen aller <p>-Elemente per slideUp():
$("#faq h3").click(function(){
  $("#faq p").slideUp(500);
  $(this).next().slideDown(500);
});

Die Zahl 500 steht hier für die Anzahl der Millisekunden, die die Animation jeweils dauern soll. Hier kann man mit den Werten nach Geschmack experimentieren.

7.
Damit der Besucher auch intuitiv weiß, dass die Überschriften klickbar sind, bekommt der Cursor über CSS das Aussehen, das er auch beim Überfahren von Hyperlinks hat:
$("#faq h3").css({"cursor":"pointer"});


Im Prinzip haben wir schon alles, was wir benötigen, um unsere Liste als Accordeon zu benutzen.
Hier nochmal der zusammengefasste Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#faq p").css({"display":"none"});
    $("#faq h3").css({"cursor":"pointer"});
    $("#faq h3").click(function(){
      $("#faq p").slideUp(500);
      $(this).next().slideDown(500);
    });
    $("#faq h3").parent().dblclick(function(){
      $(this).remove();
    });
  });
</script>
Vielleicht könnt ihr diese Funktionalität in euren Seiten gebrauchen, viel Spaß damit.
In der Arbeitsdatei ist das Ganze mit vollständigem Code zu finden.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Karol
  • 23.09.2011 - 14:50

Super Tut, allerdings ruckelt es beim sliden ein wenig, da gibt es sicher noch Lösungen wo das bisschen flüssiger abläuft. z.B. http://docs.jquery.com/UI/Accordion ...hat mir trotzdem weiter geholfen DANKE!!!

Portrait von moonfiretl
  • 03.10.2010 - 18:06

gutes tutorial, danke!

Portrait von intro
  • 13.09.2010 - 12:07

danke für das tut
war hilfreich

Portrait von dragongrafix
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.06.2010 - 13:16

Danke! Gutes Tutorial

Portrait von oionline
  • 03.04.2010 - 08:42

Super, vielen Dank. Sehr simpel erklärt.

Portrait von krafdi
  • 23.03.2010 - 20:04

Schönes Tut. Auch für Anfänger! Danke dafür.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.03.2010 - 20:02

Genau sowas habbich gesucht. Hatte es vorher mit divs verwirklicht, gefällt mir aber mit Ajax besser. Danke :-)

Portrait von itstumpp
  • 15.02.2010 - 12:14

Super, vielen Dank für dieses Tutorial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.02.2010 - 09:25

Klasse, vielen Dank.

Portrait von dickerfreddy
  • 07.02.2010 - 22:17

Danke gute Anleitung auch für mich zu verstehen, Danke

Portrait von sokie
  • 24.01.2010 - 16:36

Die Möglichkeit einer einer ordentlihen Antwort, gerade wenn es um Code geht, ist hier sehr limitiert. Bitte im Forum posten.

Portrait von perra
  • 05.01.2010 - 15:58

Sorry bin Anfänger

src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js /script

ich versteh das nicht, holt der sich die jquery.min.js aus dem internet?
kann der javascript nicht ausgeführt werden wenn keine internet verbindung bereit steht?

wie sieht der code denn dann aus wenn man die jquery 1.3.2 schon runtergeladen hat.

Portrait von perra
  • 05.01.2010 - 15:53

super dankeschoen sehr toll

Portrait von Diakon
  • 21.12.2009 - 13:35

Hi,

auch wenn ich es nun nicht direkt umsetzen kann, finde ich es doch (und vor allem gemessen an den aktuellen jquery - tuts hier) sehr lehrreich und gut geschrieben. 5*

Portrait von itstumpp
  • 20.12.2009 - 13:34

Vielen vielen Dank für dieses tolle Tutorial. Ich kann das bestimmt gut gebrauchen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.12.2009 - 14:38

Danke für das Tut. jQuery ist zwar irgendwie unhübsch zu schreiben, aber doch sehr cool was man mit so wenig Code alles hinkriegt.

Portrait von photografx
  • 12.12.2009 - 12:20

Sieht echt simpler aus als ich es mir vorgestellt hätte - freu mich schon es einzusetzen. lg

Portrait von Niobe
  • 11.12.2009 - 11:59

Danke - bin restlos begeistert, ausgezeichnetes Tut. Das hilft mir sicher weiter. Werde ich zwar im Moment nicht einsetzen, muss erst meine anderen Tipps und Empfehlungen umsetzten. Vielen Dank für die gemachte Arbeit.
Gruss

Portrait von dagge
  • 11.12.2009 - 07:18

Super, endlich kapier ich das mal ganz schnell, - danke, werd ich gleich verwenden...

x
×
×