Blogbeitrag

Code, um zu Beginn das Akkordeon Widget geschlossen zu halten.

Akkordeon Widget im Elementor zu Beginn geschlossen

Das Standard-Akkordeon-Widget von Elementor hat einen großen Nachteil. Der erste Reiter ist standardmäßig geöffnet. Es gibt weitere Elementor-Erweiterungen, die ebenfalls ein Akkordeon-Widget mitliefern und die so konfiguriert werden können, dass der erste Reiter standardmäßig geschlossen ist.

Damit aber nicht ein weiteres Plugin die Performance beeinträchtigt, gibt es dennoch Möglichkeiten, beim Standard-Akkordeon-Widget von Elementor den ersten Reiter geschlossen zu halten.

Möglichkeit 1

Die im Internet am weitesten verbreitete Möglichkeit ist nachfolgender JavaScript-Code. Dieser funktioniert allerdings nur bedingt und die Funktion hängt stark von der Website-Performance ab. Wir raten von dieser Möglichkeit allerdings ab.

				
					<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>
				
			

Nach dem Speichern der Seite ist das Akkordeon-Element komplett geschlossen. 

Falls das Script auf deiner Seite nicht funktionieren sollte, kann das 2 Gründe haben:

  1. Der JavaScript-Code lädt schneller als die Seite fertig geladen ist – Du kannst hierzu den Wert bei „delay“ in Zeile 3 erhöhen. Der Wert steht für Millisekunden. Du kannst hier den Wert 500 ausprobieren.
  2. jQuery wird auf der Seite nicht geladen oder blockiert. Vergewissere dich, dass jQuery eingebunden ist und geladen wird.

Möglichkeit 2

Die 2. Möglichkeit ist mittels CSS gelöst und die deutlich bessere und zu 100% funktionierende Variante. Als erstes fügst du beim Akkordeon-Widget ganz oben einen Reiter ein, der keinen Inhalt erhält. Ich habe diesen „Unsichtbar“ genannt.

Danach fügst du unter Akkordeon > Erweitert > Eigenes CSS den nachfolgenden CSS-Code ein:

				
					.akkordeon-closed .elementor-accordion > div:first-of-type {
    display: none !important;
}
				
			

Solltest du mehrere Akkordeons auf deiner Website nutzen und möchtest nicht immer wieder den CSS-Code erneut eingeben, kannst du diesen auch im Customizer eingeben. Diesen findest du im Administrations-Bereich von WordPress links unter Design > Customizer. Dort kannst du den Code bei Zusätzliches CSS eintragen

Als letzten Schritt musst du im Akkordeon-Widget unter Erweitert > Layout bei CSS-Klassen folgendes eingeben: akkordeon-closed

Jetzt sollte der erste Reiter unsichtbar sein und somit dein Akkordeon beim Aufruf der Seite geschlossen sein.

Webdesign

E-Commerce

Service

Referenzen

Über uns

Blog

Kontakt