Der PageBuilder Elementor enthält standardmäßig sehr viele praktische Widgets. Eines davon ist das „Umschalter“ und „Accordion“ Widget.
Was ist der Unterschied zwischen dem Umschalter und dem Accordion Widget?
Das Umschalter-Widget öffnet jedes Element einzeln. Man kann damit alle Elemente gleichzeitig geöffnet haben.
Das Accordion-Widget schließt alle anderen Elemente, wenn man eines öffnet. Standardmäßig ist das erste Element des Accordions geöffnet. Manchmal möchte man aber alle Accordion-Elemente von Anfang an geschlossen haben. Das lässt sich mit einem kleinen Script machen.
Wie man alle Accordion-Elemente geschlossen anzeigt
Um beim Betreten der Seite alle Accordion-Elemente geschlossen anzuzeigen, muss man nur ein HTML-Widget an beliebiger Stelle platzieren und nachfolgenden Code einfügen. Ich setze es meistens gleich unterhalb des Accordions (der Besucher der Webseite sieht dieses Element nicht).
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>Danach die Seite speichern und schon sind die Accordion-Elemente geschlossen.
Sollte dieses Script auf deiner Webseite nicht funktionieren, dann kann es folgende Gründe haben:
- Das Script lädt schneller, als deine Seite fertig geladen ist – Als Lösung kannst du hier den Wert 100 in der zweiten Zeile des Scripts höher setzen. Probiere es mal mit 500. Der Wert steht für Millisekunden
- jQuery wird auch deiner Seite nicht geladen. Vergewissere dich, dass jQuery eingebunden und geladen wird.
Ich hoffe, der Artikel hat dir gefallen. Lass mich in den Kommentaren wissen, ob es auf deiner Webseite funktioniert hat.
20 Responses
Hallo Andy,
danke für diese einfache und funktionierende Lösung!
Ich war mir nicht ganz sicher, wo ich das Skript einfügen muss. Hab’s einfach ausprobiert und ein Textelement vor meinen ganzen Accordions eingefügt. Funktioniert prima! Jetzt ist die Seite übersichtlicher.
Viele Grüße
Dorothea von naturistcamping.reisen
Hallo Dorothea!Scripte kannst du mit einem html-widget einfügen. Aber zur Info: Elementor Pro* hat mittlerweile das Accordion Widget überarbeitet – da gibt’s nun eine Einstellung in den Optionen des Widgets, damit das erste geschlossen bleibt.
DANKE!!! ging super einfach und war schnell erledigt. Funktioniert auch bei meinen Templates.
Super, freut mich und danke für dein Feedback!
In Elementor PRO* gibt’s übrigens auch die Einstellung dafür direkt im Widget. Dann brauchst du den Code nicht.
bei mir klappt es leider nicht, was ist mit jquery gemeint?
jQuery ist eine Javascript Bibliothek, die im Code verwendet wird. Ich rate dir aber, das neue Accordion Widget zu verwenden, dort kannst du nun schon in Elementor einstellen, ob das erste eingeklappt sein soll – somit brauchst du den Code dann gar nicht. Das wurde erst nach meiner Lösung veröffentlicht.
Hallo, ich bin so dankbar über den code. ist der einzige der endlich funktioniert.. ausser am handy. hast du eventuell noch eine ergänzung?
Hallo Nina! Danke für das Feedback!
Du könntest dich nur mit dem Wert der Verzögerung spielen – also diesen etwas höher setzen.
Was aber mittlerweile noch geht ist das „neuere“ Accordion Widget. Dafür musst du in den Einstellungen von Elementor aber auch „nested elements“ aktivieren. Dort lässt es sich ganz einfach einstellen, dass das erste geschlossen sein soll – ganz ohne extra Code.
Hi. Ich möchte nur vielen Dank für den Code sagen. Hab ihn eingebaut und es hat sofort und reibungslos funktioniert. Top!
Hallo Christian! Sehr gut! Danke für dein Feedback!
TipTop. Hat im Ansichts-Modus direkt funktioniert… Danke!
Super, dass es geklappt hat! Danke für dein Feedback!
Danke für das Code Snippet. Funktionierte nachdem ich den Wert von 100 auf 500 gesetzt habe.
Viele Grüße
Tomas
Super, ja, der Wert muss je nach Ladezeit ein wenig angepasst werden.
Hallo und guten Tag,
bei mir funktioniert es einwandfrei, vielen Dank für diese gute Hilfestellung !
Hallo,
super! Danke für dein Feedback!
Hallo,
ich habe dein Script ausprobiert. Im Editor klappte das wunderbar. Aber außerhalb des Editors, nach dem Abspeichern bekomme ich die Fehlermeldung:
jQuery(document).ready(function($) { var delay = 500; setTimeout(function() { $(‚.elementor-tab-title‘).removeClass(‚elementor-active‘); $(‚.elementor-tab-content‘).css(‚display‘, ’none‘); }, delay); });
Du siehst, ich habe das schon auf 500 statt 100 gesetzt. Irgendeine Idee?
Viele Grüße,
Jens
Hallo Jens,
hab mir deine Webseite gerade angesehen und dort sind die Accordions geschlossen und sehe keine Fehler. Evtl. hast du den Fehler schon gefunden? Aber was ich so in deinem Kommentar oben sehe, sollten das immer ‚ Zeichen bei der Angabe der Klassen sein und nicht ‚‘
Aber sieht so aus, als hättest du das bereits behoben
Vielen Dank!!
ChatGPT hat es nicht geschafft, mir einen Code dafür zu geben… Deiner hat sofort funktioniert!
Viele Grüße, Helga
Künstliche Intelligenz wie ChatGPT ist hilfreich, aber nicht immer 100% geprüft, ob das alles auch stimmt und funktioniert, was es ausspuckt 🙂
Danke für dein Feedback!