kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

jQuery Accordion – Elemente auf- und zufahren lassen (slide toggle)

Um auf einer Website lange Listen mit Inhalten platzsparend abzubilden, wird häufig auf ein sog. Accordion zurückgegriffen. Bei einem Accordion verfügt jeder Eintrag der Liste über einen Titel und eine Beschreibung. Per Klick auf den Titel wird dann die Beschreibung eingeblendet und – sofern gewünscht – die Beschreibungen aller anderen Einträge versteckt. In diesem Beitrag findet ihr verschiedene Versionen eines Accordions auf Basis des JavaScript-Frameworks jQuery.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Allgemeine Infos

Damit ihr die Beispiele in diesem Beitrag möglichst einfach an das Layout eurer eigenen Website anpassen könnt, haben wir auf das Styling weitestgehend verzichtet. Die Beispiele enthalten nur den Code der für die jeweilige Funktion auch wirklich benötigt wird.

jQuery Accordion Basis-Version

Das HTML-Grundgerüst aller Beispiele bildet eine Definitionsliste (<dl>). Innerhalb des »Definition Term« <dt> wird die Überschrift und der Link zum öffnen der Detailansicht eingebunden. Die per CSS ausgeblendete »Definition Definition« <dd> beinhaltet den ausführlichen Text.

<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> … </dt>
  <dd> … </dd>
  <dt> … </dt>
  <dd> … </dd>
</dl>
dd { display:none; }
.closed { background:red; }
.open { background:green; }

Per JavaScript (jQuery) wird bei einem Klick auf <dt> das nachfolgende <dd>-Element eingeblendet. Gleichzeitig wird die Klasse des <a>-Tags innerhalb von <dt> ausgetauscht. Die Basis-Version des jQuery Accordions ermöglicht es mehrere Elemente gleichzeitig zu öffnen.

$(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".
	});
});

Beispiel anschauen

Automatisch geöffnete Accordion-Abschnitte

Wenn ihr einzelne Elemente beim Seitenaufruf geöffnet darstellen möchtet, fügt die Klasse .initial-open {display:block;} im CSS-Code ein und weist die Klassen dem gewünschten <dd>-Element zu. Zusätzlich solltet ihr die Klasse .closed des entsprechenden Elements dann auf .open setzen.

Beispiel anschauen

Per Klick ein Element öffnen und alle anderen schließen

Wenn ihr immer nur ein Element gleichzeitig geöffnet haben möchtet, verwendet das folgende Beispiel. Beim Klick auf den Accordion-Titel bekommt dieser die Klasse .open und öffnet den darauf folgenden Accordion-Inhalt. Der zuvor geöffnete Accordion-Inhalt wird geschlossen und die Klasse .open wird beim zuvor aktiven Accordion-Titel entfernt.

Bitte beachtet, dass diese Form der Darstellung die Benutzerfreundlichkeit stark einschränken kann – beispielsweise da ein Vergleich mehrerer Texte nicht mehr so einfach möglich ist.

$(document).ready(function(){
  $('.accordion-title').click(function() {
    $(this).toggleClass('open');
    $accordion_content = $(this).next('.accordion-content');
    $('.accordion-content').not($accordion_content).slideUp();
    $('.accordion-content').not($accordion_content).prev('.accordion-title').removeClass('open');
    $accordion_content.stop(true, true).slideToggle(400);
  });
});

Beispiel anschauen

Nach dem Öffnen eines Elements automatisch zu dessen Anfang scrollen

Falls euer Accordion automatisch zum Anfang des aktiven Accordion-Elements scrollen soll, nachdem ihr es ausgewählt habt, könnt ihr euren Code mit einer weiteren Funktion verknüpfen. Hierzu könnt ihr den folgenden Code verwenden.

$(document).ready(function(){
  $('.accordion-title').click(function(event) {
    event.preventDefault();
    $(this).toggleClass('open');
    $accordion_title = $(this);
    $accordion_content = $(this).next('.accordion-content');
    $('.accordion-content').not($accordion_content).slideUp();
    $('.accordion-content').not($accordion_content).prev('.accordion-title').removeClass('open');
    $accordion_content.stop(true, true).slideToggle(400);
    if ($(this).hasClass('open')) {
      ScrollToTop();
    }
  });
});

function ScrollToTop() {
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: $($accordion_title).offset().top - 5
    }, 600);
  }, 600);
}

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

79 Kommentare

  1. Stefan

    Verfasst am 17. November 2011 um 11:28 Uhr.

    Auf jeden fall einen Bookmark wert das Tutorial, kann ich sicherlich mal gebrauchen wenn ich wieder an meinen Blogs bastele. DANKE dafür.

  2. Mischa Lempe

    Verfasst am 27. November 2011 um 20:42 Uhr.

    Jaaa! Genau das brauche ich gerade für eine Seite! Ich wollte zuerst das jQuery Accordion nehmen, aber das hier ist mir doch vieeel lieber! :D Schlank, schnell, wendig – also das Gegenteil von mir… ;) Allerdings nicht barrierefrei weil jQuery leider display:none; benutzt. Also immer überlegen, für was es sein soll.

  3. Roman

    Verfasst am 6. Dezember 2011 um 8:14 Uhr.

    Ich war so „frech“ und hab mir das auch mal als Lesezeichen angelegt…kann ich eventuell noch gebrauchen…danke !

    @Mischa:
    Was ist denn an display:none so schlimm ?
    Die Alternative dazu wäre ja visibility:hidden was ja nur ein kleinen Unterschied macht…oder geht es um eine ganz andere Variante sowas zu realisieren ?

    „Hiding an Element – display:none or visibility:hidden

    Hiding an element can be done by setting the display property to „none“ or the visibility property to „hidden“. However, notice that these two methods produce different results:

    visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
    display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there.“

  4. Matze

    Verfasst am 28. Dezember 2011 um 12:52 Uhr.

    Hallo, ich habe das Tutorial mal getestet. Der Slide Toogle befindet sich relativ weit unten auf der Seite. Wenn ich auf den Link klicke, springt der Browser also jedes mal nach oben und ich muss nach unten fahren. Woran kann das liegen?

    Viele Grüße

    • Jonas Hellwig

      Verfasst am 29. Dezember 2011 um 11:58 Uhr.

      @Matze: Ich nehme an du hast einen leeren Link (#) erstellt für das Element. Gib dem Link mal als Ziel javascript:return false; dann sollte das Problem behoben sein und die Seite beim Klick nichtmehr zum Anfang springen.

      • Carsten

        Verfasst am 12. Mai 2014 um 22:13 Uhr.

        Hallo Jonas,

        ich hatte jetzt auch gerade Probleme damit, aber die Lösung funktionierte wunderbar nun prima für meinen Newsbereich. Danke für das prima Script.

        LG Carsten

  5. Axel

    Verfasst am 16. Januar 2012 um 10:00 Uhr.

    Hallo Jonas,

    ich würde das Script gerne für mein Menü im responsive Design verwenden. Die Methode ist sehr platzsparend was der Usability sehr entgegen kommt. Mein Problem mit dem Code ist aber, dass ich gerne mehrere Menüpunkte auffahren lassen möchte, wenn der Button geklickt wird und nicht nur das nächste Element. Habe schon versucht next im javascript code mit all zu ersetzen, aber das ist wohl nicht die Lösung.

    Außerdem habe ich das gleiche Problem wie Matze. Allerdings bei mir steht das Menü im Header. Beim ersten klicken springt der Viewport immer ans Ende der Seite. Ich verwende zum Testen den Html-Code wie folgt. Die Links sind also ja eigentlich leer. Später im Live-Fall sind die Links natürlich mit Zielen belegt:

    Menü
    Portfolio
    Blog

    Danke für einen kurzen Tipp.

    Viele Grüße,
    Axel

    • Jonas Hellwig

      Verfasst am 16. Januar 2012 um 10:19 Uhr.

      @Axel: Hallo Axel, also das Problem mit dem „nach oben springen“ sollte durch die return:false-Lösung von oben behoben sein. Damit alle Listenpunkte gleichzeitig auffahren probiere mal folgendes:

      Ändere diese Zeile: $(this).next("dd").slideToggle("fast"); // blendet beim Klick auf "dt" die nächste "dd" ein.

      In diese: $("dd").slideToggle("fast");

  6. Axel

    Verfasst am 16. Januar 2012 um 14:23 Uhr.

    Ja, passt. Besten Dank!

  7. Ralf

    Verfasst am 19. Januar 2012 um 22:51 Uhr.

    Hallo Jonas,

    weißt Du, ob das Script irgendwie auch mit einer Unterebene funktioniert?

    Also wenn ich z.B. den ersten Link aufmache, erscheinen 2 weitere DIVs darunter, die auch getoggled werden können.

    Danke & Grüße
    Ralf

    • Jonas Hellwig

      Verfasst am 20. Januar 2012 um 13:46 Uhr.

      @Ralf: Unverändert nicht. Aber die Basis-Funktionalität kannst du ja dann auf andere Ebenen erweitern. Ich würde es wahrscheinlich am ehesten mit weiteren Listenpunkten innerhalb der Definitionsliste umsetzen.

  8. Jakob

    Verfasst am 9. Februar 2012 um 12:59 Uhr.

    Super Fund, ich habe ne Weile danach gesucht – DANKE! :)

    Ich will ja nicht klugsch***, aber es gibt eine Mini-Verbesserung, die ich gern mit euch teilen möchte:

    Ich habe den Inhalt der id #button jeweils in die Klassen .closed und .open kopiert und damit #button komplett abgeschafft. Da ich mehrere klappbare DIVs auf meiner Seite habe, wäre es sonst nicht regelkonform (eindeutige IDs).
    Außerdem habe ich statt dt und dd zwei DIVs definiert und den JS code entsprechend angepasst.
    Ein letztes kleines Schmankerl ist ein „mehr lesen“-Hinweis am Ende des zu Beginn sichtbaren Textes, der mit dem Klick ausgeblendet wird.

    Für alle, die Interesse haben, hier eine kurze Demo:
    (ich hoffe das ist ok Jonas?)

    http://pastebin.com/DaeuzM7K

    Viel Spaß damit!
    Jakob

  9. miv

    Verfasst am 15. Mai 2012 um 22:02 Uhr.

    Ziel javascript:return false; dann sollte das Problem behoben sein und die Seite beim Klick nichtmehr zum Anfang springen.

  10. Stefan

    Verfasst am 5. Juli 2012 um 23:46 Uhr.

    Super! Habe nach genau dieser Lösung gesucht.

  11. Nicola

    Verfasst am 14. September 2012 um 11:04 Uhr.

    Wie ginge in dieser Lösung die Elemente gruppiert nebeneinnder plazieren?
    Also zb 3 Elemente rechts und 3 Elemente links

  12. Madi

    Verfasst am 22. Oktober 2012 um 15:58 Uhr.

    Vielen Dank für dieses tolle Tutorial!
    Ich bin schon seit Tagen am verzweifeln, weil ich bis jetzt Javascript nicht in meinen Blog einbinden konnte. Dank dieser Methode klappt es!
    lg

  13. Andreas

    Verfasst am 23. Oktober 2012 um 8:49 Uhr.

    Hallo Jonas, ich würde meine Homepage auch gern für mobile Geräte zugänglich machen und bin beim Recherchieren auf deine tolle Website gestoßen. Die Funktion des Menüs gefällt mir sehr gut, also der Klick-Button bei verkleinertem Bildschirm. Kannst du mir auf die Schnelle sagen, was man dazu braucht? Kann man diesen Code irgendwo downloaden oder gibt es ein Tutorial? Meine eigene Navi ist ohnehin vertikal, mir geht es nur darum, das Menü für Smartphones etc. zu einem Button zu minimieren.
    Vielen Dank für deine Antwort im voraus ;-)
    Andreas

  14. Ingo

    Verfasst am 4. Dezember 2012 um 19:22 Uhr.

    Vielen Dank für das Super-Script, das auch für den Laien (näherungsweise)
    leicht umzusetzen ist!

  15. Harald

    Verfasst am 19. Dezember 2012 um 1:19 Uhr.

    Vielen Dank für die Anleitung! Echt klasse. Ich habe eine Frage -> auch hier bei Deinem Menü ist es so, dass wenn man in der Small Display Version das Menü öffnet und es anschließend wieder schließt UND dann das Browserfenster wider vergrößert ist in der Desktop Version kein Menü zu sehen.
    Gibt es dafür eine Lösung?

    Grüße
    Harald

  16. Robin

    Verfasst am 23. Dezember 2012 um 22:58 Uhr.

    Hallo Jonas,

    zuerst einmal vielen Dank für die vielen Snippets etc., vieles hilft mir beim Lernen des Umgangs mit den verschiedensten Sachen, klasse ;-)

    Mich würde interessieren, ob es bei o.s. Snippet möglich ist, von Anfang an eine dieser bspw. drei direkt geöffnet zu haben.

    Quasi den zweiten Absatz direkt offen, während eins und drei am Anfang zu sind… Ich hoffe, du verstehst, wie ich das meine.

    Viele Grüße und ein frohes Weihnachtsfest,
    Robin

  17. Leonie

    Verfasst am 30. Dezember 2012 um 15:54 Uhr.

    Hallo Jonas,

    vielen Dank für das tolle Tutorial. Soweit hat alles gut geklappt.
    Ist es möglich, dass man den jeweiligen Punkt, der sich öffnen soll, per Anker mit einem anderen Menü verbindet?
    Also wenn ich auf einer anderen Navigationsleiste einen Menüpunkt anwähle, sich dann der dazugehörige Punkt innerhalb des Slide Toggle-Menü öffnet?!

    Ich hoffe, ich habe mich verständlich ausgedrückt.

    Gruß
    Leonie

  18. Johannes

    Verfasst am 27. Mai 2013 um 15:12 Uhr.

    Hallo Jonas,

    vielen Dank für das tolle Tutorial, das Accordion gefällt mir wirklich gut. Jedoch ist scheint der Verlaufsfilter von Microsoft nicht mit der Kurzschreibweise von HEX-Farben (‚#fff‘) kompatibel zu sein, zumindest zeigt er bei mir einen Verlauf von blau (etwa #00f) nach schwarz an.
    Die Lösung war für mich denkbar einfach, nämlich ‚#ffffff‘ ausschreiben.

    Grüße
    Johannes

  19. Dmitry

    Verfasst am 14. August 2013 um 12:24 Uhr.

    Super, genau nach dieser Kombination mit toggleClass() habe ich gesuncht. Alles funktioniert super.
    Danke schön!

    Viele Grüße

  20. Reiseblog

    Verfasst am 26. August 2013 um 10:18 Uhr.

    Moin moin, Danke konnte das Snippet gerade gut gebrauchen.

  21. Christian

    Verfasst am 17. Dezember 2013 um 14:54 Uhr.

    hi, sehr schön schlankes Script. ist es auch möglich, dass sich das aktive div schließt, wenn man auf das nächste klickt? das wäre prima.

    Grüße
    Christian

  22. Slein

    Verfasst am 20. Dezember 2013 um 14:41 Uhr.

    Hallo zusammen,

    ich nutze diese tolle Slidefunktion in einer Sidebar und möchte, dass der Browser die letzte Aktion (close/open) sich merkt. Der Besucher soll nicht jedes mal klicken müssen ob er den Inhalt sehen möchte oder nicht. Ist das irgendwie möglich?

    Herzlichen Dank!

  23. Wolfgang

    Verfasst am 2. Februar 2014 um 10:40 Uhr.

    Hallo,

    danke für die Bereitstellung, sehr hilfreich.

    Eine Änderung, die vllt. auch für andere interessant ist, habe ich vorgenommen:

    Es soll noch User geben, bei denen JS deaktiviert ist. Die bekommen beim Original nur die zugeklappten Überschriften zu sehen ohne an die hinterlegten Details zu kommen (es sei denn, sie lesen den Quelltext :-) ).

    Um hierzu aufwändige Konstrukte mit „noscript“ zu vermeiden, habe ich also das „display:none“ aus der CSS für den „dd“-Tag entfernt und lasse es stattdessen über JS dort einfügen. Wenn nun die Seite mit deaktiviertem JS aufgerufen wird, sind alle Elemente „aufgeklappt“, mit aktivem JS wie gehabt „eingeklappt“.

    PS: die umfangreiche Kommentarliste habe ich nicht komplett gelesen; sollte ähnliches bereits angesprochen worden sein, kann mein Kom. gelöscht werden.

  24. Jakob

    Verfasst am 5. August 2014 um 15:05 Uhr.

    Super! Genau was ich gesucht habe. Ich verwende deine Basisversion und habe dazu eine Frage: Kann ich den Content standardmäßig ausblenden? Derzeit ist der Slider immer ausgefahren.

  25. RSD

    Verfasst am 16. September 2014 um 14:21 Uhr.

    Hej Jonas,
    ich lese immer wieder gern dein Blog, und finde in mit abstand aus dem wust der angebote herausragend.
    Zum thema..
    Für mich ist ein accordion eine folge von mehreren dropboxen, wobei die eine sich schließt, wenn die andere auf geht. Jenes ist zumindest mein verständnis von accordion. Eine einzelne box sehe ich als dropdownbox oder collapse div.
    Und als ich diesen beitrag, der ja schon etwas in die jahre gekommen ist, gelesen habe – ich nach jenem von mir definierten accordion suchte – aber nicht fand, wollte ich, wem es auch so geht, ein kurzes JS snippets zeigen (natürlich mit deiner erlaubnis), wo genau das hier von mir beschriebene accordion als alternative zu sehen ist.
    Evtl. findest du als erfahrener ja das eine oder andere was dort nicht ganz so optimal ist im javascript, falls und wen ein wort zu.
    Auch ist mir klar, dass jenes wohl bald eher mit css3 umgesetzt wird als mit js.
    LINK
    LG Ralf

  26. Markus

    Verfasst am 17. November 2014 um 11:18 Uhr.

    Hallo, kann man diese Slides auch mit Links (z.B. in einem menü) öffnen lassen?

    Ich hab nämlich 2 Container, wovon einer als Menü dienen soll. klicke ich nun dort auf „Anleitung“ soll sich der Slide mit der Überschrift „Anleitung“ im anderen div öffnen. Geht das mit diesem Script?

    Gruß Markus

  27. Markus B.

    Verfasst am 22. November 2014 um 16:02 Uhr.

    Hallo Jonas,

    das Accordion ist echt klasse. Mein Problem:

    Ich habe der dt ein paar -Tags hinzugefügt unter jetzt funzt das toggleClass nicht mehr. Hast du einen Tip wie ich das jQuery anpassen muss damit es wieder funktioniert??

    Das ist mein TExtDetails

    Danke für Deine Hilfe

    LG Markus B.

  28. Thomas G.

    Verfasst am 3. April 2015 um 9:34 Uhr.

    Hallo das ist wirklich ein tolles Script.
    Mein Problem: ich möchte beim Seitenaufruf den 1. Reiter schon geöffnet haben oder auch den 2.
    Frage: wie bekomme ich das hin? bin leider blutiger Anfänger.
    Danke im voraus für Eure Hilfe

    • Jonas Hellwig

      Verfasst am 3. April 2015 um 9:49 Uhr.

      Hallo Thomas, da gibt es verschiedene Möglichkeiten. Du kannst z. B. folgende CSS-Klasse erstellen .initial-open {display:block;}, und diese Klasse dann dem gewünschten <dd>-Element zuweisen. Dann ist das Element beim Seitenaufruf geöffnet.

      • Raphael

        Verfasst am 5. Mai 2015 um 20:41 Uhr.

        Hi Jonas, danke für den Code, der ist wirklich super, weil er so einfach ist. Ich habe – so wie oben vorgeschlagen über .initial-open {display:block;} einen Bereich beim Laden der Seite bereits geöffnet. Das funktioniert toll, aber es gibt ein Miniproblem: Der Pfeil, der sich auf „Element offen oder geschlossen“ bezieht, macht nicht mit. Er ist in der Position geschlossen obwohl das Element offen ist. Gibt es da eine Lösung?
        Grüße!
        Raphael

      • Jonas Hellwig

        Verfasst am 6. Mai 2015 um 9:29 Uhr.

        Hallo Raphael, du musst zusätzlich die Klasse .closed auf .open setzen. Da Fragen zu diesem Thema bereits mehrfach gestellt wurden, habe ich den Beitrag um ein entsprechendes Code-Beispiel ergänzt. Ich hoffe es hilft dir weiter.

  29. Thomas G.

    Verfasst am 3. April 2015 um 10:37 Uhr.

    Hallo Jonas
    vielen, vielen Dank für die super schnelle Antwort.
    Bin wie gesagt absoluter Anfänger und auch nicht mehr so jung, das ich alles gleich verstehe. Noch ein Frage bitte:
    im Style Bereich füge ich ein:
    .initial-open {display:block;}
    —-
    aber wie füge ich das dem Element zu?
    Kannst Du mir da nochmal helfen?

  30. Thomas G.

    Verfasst am 3. April 2015 um 11:11 Uhr.

    Hat sich erledigt, bin selbst darauf gekommen:

    Nur Fotos werden erst nach dem einklappen und wiederholten Ausklappen angezeigt, aber ansonsten perfekt.

  31. Kat

    Verfasst am 14. April 2015 um 8:27 Uhr.

    Danke für den Script, das habe ich gesucht :) nur habe ich habe ein kleines Problem. Ich habe auch alles so weit hinbekommen aber der Text im Fenster will einfach nicht links anfangen, sondern ist eingerückt. Ich habe mein Quellcode auch mit angefügt.
    Was mache ich falsch? :(

    Quellcode von der Redaktion entfernt.

    Danke schon mal für die Hilfe

    • Jonas Hellwig

      Verfasst am 14. April 2015 um 8:40 Uhr.

      Hallo Kat, die Kommentar-Funktion ist nicht dafür gedacht Quellcode in dieser Menge einzufügen. Ich habe den Code daher entfernt. Bitte veröffentliche das Beispiel online (z. B. hier: codepen.io) und verweise dann im Kommentar mit einem Link auf die Quelle.

  32. Christina

    Verfasst am 18. Mai 2015 um 0:01 Uhr.

    Hallo Jonas, ich baue mir gerade eine Seite und habe die Accordeonfunktion dazu benutzt Bilder aufklappen zu lassen. Jetzt möchte ich gerne bei click auf das letzte Bild alles wieder einklappen lassen. Ich bekomme es einfach nicht hin,

    <div class="container small-2 large-9 columns">

    <dl>
    <dt><img src="http://placehold.it/500x500"><a href="#" id="button" class="closed">Details</a></dt>
    <dd><img src="http://placehold.it/500x500">
    <img src="http://placehold.it/500x500">
    <img src="http://placehold.it/500x500"><img src="http://placehold.it/500x500"><img src="http://placehold.it/500x500"><img src="http://placehold.it/500x500">

    <!-- so geht's nicht :-( --> <dl><dt><a href="#" class="closed">Details<img src="http://placehold.it/500x500"></a></dt></dl>

    </dd>


    </dl>
    </div>

    Merkwürdigerweise taucht auch das Wort Detail nicht auf, nur wenn ich die id=“button“ entferne.

    Was kann ich machen?
    Danke und Gruß

    • Jonas Hellwig

      Verfasst am 18. Mai 2015 um 18:31 Uhr.

      Hallo Christina, probiere mal zusätzlich das hier:

      $("dd img").click(function(){
      $('dd').slideToggle("fast");
      });

      Damit kannst du innerhalb eines dd-Elements auf ein Bild klicken um das Accordion wieder zu schließen.

  33. Raphael

    Verfasst am 18. Mai 2015 um 22:32 Uhr.

    Hallo Jonas,
    im Prinzip müsste das Ganze doch auch für Menüs verwendbar sein. Man muss halt einfach und verwenden, aber sonst kann alles gleichbleiben, nehme ich an. Ich werde das in den nächsten Tagen mal ausprobieren und das Ergebnis des Experiments hier posten.
    Viele Grüße
    Raphael

    • Raphael

      Verfasst am 22. Mai 2015 um 12:59 Uhr.

      Nö. klappt natürlich nicht, da war ich zu schnell. ;) Eine Liste -ul- und eine Definitionsliste -dl- sind ja anders strukturiert. Schade, ich hätte den Codeschnipsel gerne auch für Menüs verwendet, denn er ist so schön einfach.

  34. Christina

    Verfasst am 19. Mai 2015 um 7:01 Uhr.

    Hallo Jonas,
    ich habe jetzt zum Testen dein Beispiel in meine Seite eingebaut und dann die aufklappenden Bilder anstelle des Textes gesetzt. Mit dem Code den du mir noch gegeben hast dazu, klappen die Elemente auf – aber dann sofort wieder zu.
    Grüße
    Christina

  35. Markus K. Liermann

    Verfasst am 13. Juni 2015 um 0:16 Uhr.

    Super Script! Echt klasse! Gibt es eine Möglichkeit, dass immer nur ein Reiter zur Zeit aufgeklappt ist?

  36. Astroth

    Verfasst am 21. Juni 2015 um 11:15 Uhr.

    Hey! Super Tutorial. Hat mir sehr viel weiter geholfen :)
    Ich habe nur eine Frage: Wenn die einzelnen Menüpunkte so viele werden, dass sie den Seiten inhalt überschreiten und man skrollen muss, habe ich folgendes Problem:
    Öffne ich einen Menüpunkt für den ich erst ein bisschen die Seite runterskrollen musste, springt die Seite wieder nach ganz oben. Der Menüpunkt ist dann zwar geöffnet, aber es nervt ein bisschen immer wieder runterskrollen zu müssen. Selbes gilt auch für schließen.
    Ich hoffe auch 3 Jahre später werde ich noch ein wenig beraten :)

  37. André

    Verfasst am 23. Juni 2015 um 15:50 Uhr.

    Vielen Dank für Dein Tutorial! :)

    Habe es probiert und auch direkt umgesetzt bekommen.

    Kannst Du mir sagen, was ich ändern muss, damit der aufklappbare Text NICHT eingerückt, sondern linksbündig mit der Überschrift angezeigt wird?

    Vielen Dank im voraus und viele Grüße,
    André

  38. André

    Verfasst am 23. Juni 2015 um 15:56 Uhr.

    Ergänzung: Meine Frage bezieht sich auf das Basis-Beispiel.

    • Jonas Hellwig

      Verfasst am 24. Juni 2015 um 18:32 Uhr.

      Hallo André, der Browser fügt margin hinzu. Mit folgendem Code kannst du es entfernen:

      dd {
      margin-left: 0;
      }

  39. Matthias

    Verfasst am 1. Juli 2015 um 23:48 Uhr.

    Hallo,

    wie kann die JS-Funktion aussehen, damit immer maximal eine Überschrift geöffnet ist? Es soll sich also eine bereits geöffnete Überschrift schließen, sobald ich eine andere Überschrift anklicke.

    Danke und Grüße
    Matthias

    • Alex

      Verfasst am 26. November 2015 um 19:53 Uhr.

      Hallo, super Script. Habs schon eingebaut. Wie kann man den JavaScript-Code anpassen, dass sich eine Überschrift automatisch schließt, wenn man eine andere anklickt.

      Danke.

  40. André

    Verfasst am 2. Juli 2015 um 20:09 Uhr.

    Hallo Jonas,

    vielen Dank für die schnelle Rückmeldung. Problem gelöst! :)

    Hast Du zufällig einen Tutorial-Tipp o.ä. für Laien um einen einfachen Einstieg in das Thema JS/jQuery zu finden?

    Viele Grüße,
    André

  41. André

    Verfasst am 19. Juli 2015 um 21:37 Uhr.

    Mir ist gerade aufgefallen, dass sich die aufklappbaren Links mit dem Android-Browser meines Smartphones nicht öffnen lassen. Im Firefox funktioniert es einwandfrei.

    Hast Du einen Tipp, was ich machen muss, damit die Links auch auf mobilen Android-Geräten funktionieren?

    • Jonas Hellwig

      Verfasst am 20. Juli 2015 um 11:49 Uhr.

      Hallo André, ich kann unter Android kein Fehlverhalten feststellen.

      • Roman Kraus

        Verfasst am 1. Oktober 2015 um 12:54 Uhr.

        Hallo,
        ich hatte exakt das gleiche Problem. Dann ist mir aufgefallen, dass ich folgende Zeile im Header vergessen hatte:

        Ich hoffe das hilft Dir weiter.

        Viele Grüße
        Roman

      • Roman Kraus

        Verfasst am 3. November 2015 um 18:49 Uhr.

        Der Post kam wohl nicht komplett an, es war folgende Zeile gemeint, bitte die eckigen Klammern entsprechend hinzufügen, das wird wohl sonst als Code interpretiert.

        <script type=“text/javascript“ src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js“> </script>

        Viele Grüße
        Roman

  42. Thorben Vogel

    Verfasst am 26. November 2015 um 22:16 Uhr.

    Hallo Jonas,

    vorab erstmal vielen Dank für Deine wirklich klasse Aufbereitung verschiedenster Themen. Ich fange gerade an mich näher mit den Möglichkeiten der Gestaltung für meinen Blog zu beschäftigen und empfinde Deine Beiträge als sehr Hilfreich und vor allem auf das Wesentliche beschränkt!

    Zu meiner Frage.
    Ich habe die Basis-Variante des Accordions im Einsatz. Funktioniert!

    Gibt es evtl die Möglichkeit immer nur ein Element offen zu haben? Wenn die Details eines anderen Elements angeklickt werden und sich das neue Element öffnet, wäre es klasse, wenn sich das vorher geöffnete Element schließt.

    Ich habe die Frage hier schon zwei mal gelesen, allerdings keine Antwort darauf gefunden! Geht sowas überhaupt?

    Vielen Dank schon im Voraus!

    Gruß
    Thorben

  43. Tom Faber

    Verfasst am 2. Dezember 2015 um 7:03 Uhr.

    Ich versuche schon seit Tagen in dieses Menü eine Google Map einzubauen.
    Die Karte wird kurz angezeigt, und verschwindet dann gleich wieder sowohl beim aufklappen als auch beim einklappen.
    Was mach ich denn da falsch ???

  44. Sven

    Verfasst am 11. Dezember 2015 um 13:57 Uhr.

    Sehr schönes Tutorial! Vielen Dank dafür!

  45. Alfred

    Verfasst am 16. Januar 2016 um 19:28 Uhr.

    Genau danach hatte ich gesucht.DANKE
    Meine Frage ist, wie gebe ich die ID mit, da ich mehrere div auf und zuklappen möchte.

    klick hier für 1
    klick hier für 2
    klick hier für 3

    Text 1
    Text 2
    Text 3

  46. Alfred

    Verfasst am 16. Januar 2016 um 21:39 Uhr.

    Ich bin am verzweifeln, kaum habe ich diesen schönen Code bei mir eingebaut der auch super funktioniert, dann funktioniert meine Fancybox nicht mehr.
    Wie kann ich das Problem lösen? Google hat mir bei diesem Problem leider nicht geholfen

  47. Fabian Goldmann

    Verfasst am 19. Januar 2016 um 15:16 Uhr.

    Hallo Jonas,

    wie auch Thorben 26. Nov 2015 suche ich nach einer Lösung bei der beim Aufruf eines Elementes das vorherige wieder geschlossen wird. Ganz viele Versuche, den entsprechenden Code aus anderen Projekten zu übernehmen sind gescheitert.
    Für deine Hilfe wäre ich sehr dankbar.

    Fabian

    • Jonas Hellwig

      Verfasst am 19. Januar 2016 um 22:23 Uhr.

      Hallo Fabian, ich habe den Beitrag um ein Beispiel erweitert, in dem immer nur ein Element gleichzeitig geöffnet ist.

  48. Fabian Goldmann

    Verfasst am 20. Januar 2016 um 11:05 Uhr.

    Vielen Dank Jonas!

    Es funktioniert. Einen Haken gibt es aber noch: Nun lässt sich der geöffnete nicht mehr mit dem eigene Pfeil schliessen. Schaffst du das auch noch?

    Danke
    Fabian

  49. Alfred

    Verfasst am 20. Januar 2016 um 19:33 Uhr.

    Ich werd das neue Beispiel mal ausprobieren, hoffe es löst mein Problem.
    Ich muss auf einer Seite verschiedene Elemente auf und zuklappen können, unabhängig voneinander. Ich denke, wenn man eine ID für jedes Element mitgeben könnte, so müsste es doch klappen?
    Ich habe leider keine Ahnung wie.

    Das zweite Problem, wenn ich diesen Code einbaue, so funktioniert er wirklich prima, aber dann funktioniert meine Fancybox leider nicht mehr.
    Ich vermute das sich das sich das Ajax-Script mit dem JS-Script der Fancybox beißt, wie kann ich das Problem lösen, ich hebe auch andere Fancybox-Scripte getestet, immer mit dem selben ERgebniss das die Fancybox ohne Funktion bleibt.

    • Alfred

      Verfasst am 4. Februar 2016 um 12:35 Uhr.

      Hat denn niemand eine Lösung für mein kleines Problem?
      Es wäre schön wenn mir jemand weiterhelfen könnte.

      Danke

  50. Marcel

    Verfasst am 1. Februar 2016 um 23:44 Uhr.

    Klappt super! Vielen Dank.

  51. Marcel

    Verfasst am 2. Februar 2016 um 10:46 Uhr.

    Hallo Jonas,

    ich habe ein kleines Problem.
    Wenn ich auf den „Silder-Text“ klicke, geht der Text einmal auf und wieder zu und dann wieder auf. Weißt du vielleicht woran das liegen könnte?
    Auf dieser Seite http://www.geburtstagswuensche.today/geburtstagsbilder/ unter den Bildern, habe ich das Script eingebaut.

    Wäre super, wenn du mir da weiter helfen könntest.

    Vielen Dank vorab und viele Grüße,
    Marcel

  52. Peter

    Verfasst am 8. Juni 2016 um 13:09 Uhr.

    Hallo,

    ich würde gerne mit einem Anker auf die Seite mit den Accordions springen und dieser Anker sollte dann gleich das entsprechende Accordion öffnen. Wie setzt man das um?

    Vielen Dank :-)

  53. Andreas

    Verfasst am 6. September 2016 um 14:06 Uhr.

    Hallo Jonas,
    ja, ein wirklich tolles Beispiel ohne viel Drumherum. Was ich nur nicht ganz in den Griff bekomme: Wenn ich einen Button des „Akkordeons“ drücke, öffnet sich zwar erwartungsgemäß der Abschnitt, aber die Seite scrollt gleichzeitig nach oben. Da ich das Script nicht ganz oben eingebaut habe, muss ich jedesmal nach dem Öffnen erst wieder nach unten scrollen. Wie ist das am besten zu lösen. Muss ich in jedem Abschnitt Anker setzen?
    Grüße von der Küste.

    Andreas

  54. Rene

    Verfasst am 27. Oktober 2016 um 13:06 Uhr.

    HI! Vielen Dank für das Tut.

    Eine Frage zur Basis-Version ohne Design: Wie bekomme ich den geöffneten Link direkt unter den ersten Link? (also ohne Abstand?

    Danke und Gruß
    René

  55. LordThrawn

    Verfasst am 17. Januar 2018 um 12:54 Uhr.

    Ich habe ein Problem ich soll das von ausklappen bei klicken von einen anderen mit dem Tag wie hier beschrieben (im Code), beim klicken bei anderen mit den gleichen wieder einklappen soll.

    $( document ).ready(function() {

    $( „div[class|=\“toggle\“]“ ).each(function()
    {
    var id = $( this ).attr(„class“).split( „-“ );
    id = id[1];

    $( „table#“ + id ).hide();
    $( this ).click(function() {

    $( „table#“ + id ).slideToggle( „slow“, „linear“ );
    });

    });

    });

  56. Andy

    Verfasst am 7. Februar 2018 um 12:30 Uhr.

    Hat bereits jemand eine Lösung, wie man einen bereits geöffneten Block durch Klicken wieder schließt?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.