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 & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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". }); });
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.
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);
});
});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);
}
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
82 Kommentare
Schreibe einen Kommentar zu Matze Antworten abbrechen
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.
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.
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.“
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
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");Axel
Verfasst am 16. Januar 2012 um 14:23 Uhr.
Ja, passt. Besten Dank!
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.
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
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.
Stefan
Verfasst am 5. Juli 2012 um 23:46 Uhr.
Super! Habe nach genau dieser Lösung gesucht.
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
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
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
Jonas Hellwig
Verfasst am 23. Oktober 2012 um 9:05 Uhr.
Hallo Andreas,
du findest den entsprechenden Code u.a. auf dieser Seite. Da gibt es unzählige Design-Pattern für responsive Websites. http://bradfrost.github.com/this-is-responsive/patterns.html
Andreas
Verfasst am 23. Oktober 2012 um 9:20 Uhr.
Hallo Jonas, vielen Dank für die superschnelle Antwort! Werde mich da mal umschauen. Gruß, Andreas
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!
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
Jonas Hellwig
Verfasst am 19. Dezember 2012 um 10:02 Uhr.
Das Menü hier auf dieser Seite ist veraltet und muss dringend ausgetauscht werden. Mir fehlt aktuell nur die Zeit dazu. Eine bessere Lösung findest du hier: http://codepen.io/bradfrost/full/sHvaz
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
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
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
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
Reiseblog
Verfasst am 26. August 2013 um 10:18 Uhr.
Moin moin, Danke konnte das Snippet gerade gut gebrauchen.
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
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!
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.
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.
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
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
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.
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
.closedauf.opensetzen. 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.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?
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.
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.
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.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.
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
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?
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 :)
Jonas Hellwig
Verfasst am 21. Juni 2015 um 11:42 Uhr.
Schau mal in diesem Artikel vorbei.
Astroth
Verfasst am 21. Juni 2015 um 11:52 Uhr.
super cool danke!
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é
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
marginhinzu. Mit folgendem Code kannst du es entfernen:dd {margin-left: 0;
}
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.
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é
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
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
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 ???
Sven
Verfasst am 11. Dezember 2015 um 13:57 Uhr.
Sehr schönes Tutorial! Vielen Dank dafür!
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
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
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.
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
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
Marcel
Verfasst am 1. Februar 2016 um 23:44 Uhr.
Klappt super! Vielen Dank.
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
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 :-)
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
Jonas Hellwig
Verfasst am 7. September 2016 um 8:39 Uhr.
Hallo Andreas, hilft dir dieser Beitrag weiter?
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é
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“ );
});
});
});
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?
Jürgen
Verfasst am 22. Juli 2018 um 9:15 Uhr.
Hallo Jonas,
ich bin auch gerade dabei ein paar Webseiten auf den Stand der Technik zu bringen. Für die Navigation würde sich so ein Accordion Menü anbieten. Leider funktionieren bei mir IPAD mit IOS 10 die Beispiele nicht…
Reinhold
Verfasst am 19. Januar 2020 um 10:03 Uhr.
Der Beitrag ist zwar schon älter, aber das Script ist einfach und wunderbar. Meine Frage: Bei Klick auf „Details“ wird ja der darunterstehende Text angezeigt. Kann ich einen bestimmten von den 3 Texten (oder auch mehreren) zusätzlich von außen, z.B. über einen Link so aufrufen, als würde ich ihn über den über dem Text liegenen Link aufrufen, also auch mit Änderung der classen „open“ und „closed“?
Andre
Verfasst am 29. Mai 2020 um 15:30 Uhr.
Hallo
Vor ein paar Tagen bin ich auf dein Tutorial gestoßen.
Ein super schlankes Script und für einen Anfänger wie mich einfach einzubauen.
Darf ich dich oder einen anderen Kommentarleser um Hilfe bitten.
Ich benützte die Variante in dem das geöffnet geschlossen wird wenn ein anderes angeklickt wird.
Wenn mann nun aber das gleiche nochmals anklickt, schliesst es sich und öffnet sich sogleich wieder. Was ich Anfänger im Javascript Code noch nachvollziehen kann.
Aber leider weiß ich nicht wie man dies Lösen kann.