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>window.addEventListener('DOMContentLoaded', function() {
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:
- 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.
- 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.
