Sie haben ein Akkordeon in Elementor eingefügt, den FAQ-Bereich befüllt, die Seite gespeichert und bemerkt, dass das erste Element ausgeklappt ist. Sie haben es nicht geöffnet. Aber Elementor hat für Sie entschieden. Dieses Verhalten ist fest im Widget verankert und lässt sich in den Einstellungen nicht ändern. Für eine Landingpage mit klarer Struktur wirkt das unsauber, und wenn der erste Block umfangreich ist, stört es den visuellen Rhythmus der gesamten Seite.

Dieses Problem existiert seit Jahren. Die offizielle Dokumentation stellt unmissverständlich fest: „Das erste Element des Akkordeon-Widgets wird beim Laden der Seite ausgeklappt." So ist es. Aber Sie müssen nicht auf ein zwangsweise geöffnetes Akkordeon starren. Es gibt vier Lösungen, und jede enthält nachfolgend eine Anleitung.

Im Folgenden finden Sie Methoden, um das Elementor-Akkordeon standardmäßig zu schließen: von einem 30-Sekunden-Snippet bis hin zu nativen Alternativen und Add-ons mit einer Checkbox in der Oberfläche. Diese Methoden wurden mit Elementor 3.27-4.2 (Free und Pro) getestet und funktionieren auf Desktop und Mobilgeräten.

💡 Kurzüberblick:

• Fügen Sie ein JavaScript-Snippet in ein HTML-Widget oder Custom Code ein, und das Akkordeon schließt sich 100 ms nach dem Laden
• Ersetzen Sie das Akkordeon durch Toggle, ein natives Elementor-Widget, bei dem alle Tabs standardmäßig geschlossen sind
• Für Minimalisten: Eine CSS-Regel blendet das erste Element aus, ohne eine einzige Zeile JavaScript
• Installieren Sie The Plus Addons oder Essential Addons und erhalten Sie einen nativen Schalter „Ersten Tab öffnen" direkt in den Widget-Einstellungen

Methode 1: JavaScript-Snippet, universell

Die zuverlässigste Methode. Elementor fügt dem ersten Akkordeon-Element beim Laden die Klasse elementor-active hinzu. Sie müssen nur das Rendering abwarten und diese Klasse entfernen.

Ein Snippet in reinem JavaScript, ohne jQuery:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

Die setTimeout-Verzögerung von 100 Millisekunden ist entscheidend. Ohne sie wird das Skript ausgeführt, bevor Elementor die Initialisierung des Akkordeons abgeschlossen hat, und die Klassen werden schlicht nicht entfernt. Bei langsamen Hosting-Anbietern oder Seiten mit einem Dutzend Widgets erhöhen Sie den Wert auf 300-500 ms. Elementor-Nutzer bestätigen im Forum: Die Methode ist bis Version 4.2 stabil.

Wo einfügen. Zwei Optionen. Erstens, HTML-Widget: Ziehen Sie es im Editor direkt über das Akkordeon und fügen Sie das Snippet ein. Der Code wird nur auf dieser spezifischen Seite ausgeführt und nicht geladen, wo kein Akkordeon vorhanden ist. Zweitens, Elementor → Custom Code im WordPress-Adminbereich: Erstellen Sie einen Eintrag, wählen Sie als Position body und veröffentlichen Sie ihn. Der Code gilt global, was praktisch ist, wenn Akkordeons über ein Dutzend Seiten verstreut sind.

Wenn Sie mehrere Akkordeons haben und alle schließen müssen, ersetzen Sie querySelector durch querySelectorAll und iterieren Sie durch die Sammlung:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

Hat es beim ersten Versuch nicht funktioniert? Fast immer handelt es sich um ein Timing-Problem: Erhöhen Sie die Verzögerung auf 1000 ms.

Methode 2: Toggle-Widget anstelle des Akkordeons

Die einfachste native Methode besteht darin, nicht gegen das Akkordeon anzukämpfen, sondern ein anderes Widget zu verwenden. Elementor liefert zwei Werkzeuge mit, die ähnlich aussehen, sich aber unterschiedlich verhalten: Akkordeon und Toggle.

Der wesentliche Unterschied:

Toggle ist optisch nicht vom Akkordeon zu unterscheiden: dieselben Überschriften, dieselben Pfeilsymbole, dieselbe Animation. Aber alle Tabs sind standardmäßig geschlossen, kein Code nötig. Öffnen Sie das Widget-Panel, suchen Sie Toggle, ziehen Sie es auf die Seite und fügen Sie Elemente genauso wie beim Akkordeon hinzu. Fertig.

Die einzige Nuance: Toggle erlaubt das gleichzeitige Ausklappen mehrerer Tabs. Wenn die Logik „einer offen, der Rest geschlossen" wichtig ist, kehren Sie zu Methode 1 zurück.

Methode 3: CSS, minimalistisch

Erscheint Ihnen JavaScript übertrieben? Schließen Sie das erste Element mit reinem CSS:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

Der erste Selektor blendet den Inhalt des ersten Tabs aus. Der zweite entfernt den unteren Rand der Überschrift, der ohne den Inhalt wie ein abrupter Abbruch wirkt. Platzieren Sie den Code im Bereich „Erweitert → Custom CSS" des jeweiligen Widgets (für ein bestimmtes Akkordeon) oder unter Design → Customizer → Zusätzliches CSS (global).

Hinweis: CSS entfernt nicht die Klasse elementor-active, sondern blendet den Inhalt nur visuell aus. Im DOM-Baum bleibt der Tab „aktiv". Dies beeinträchtigt die Funktionalität der Seite nicht, aber wenn Sie benutzerdefinierte Analysen für Akkordeon-Klicks oder Drittanbieter-Skripte verwenden, die an die Klasse gebunden sind, könnte das Verhalten Sie überraschen. Für die meisten Szenarien funktioniert diese Methode und ist die leichtgewichtigste.

Wenn Ihr Theme Elementor-Stile überschreibt, erhöhen Sie die Spezifität:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

Hat es immer noch nicht funktioniert? Das Theme verwendet wahrscheinlich eigenes JavaScript, um das Ausklappen zu erzwingen. Kehren Sie zu Methode 1 zurück: Das JS-Snippet wird später ausgeführt und setzt sich gegen jedes Theme-Verhalten durch.

Methode 4: Add-ons mit einem nativen Schalter

Einige Elementor-Add-ons fügen dem Akkordeon eine Option „Ersten Tab öffnen" hinzu, ein Klick statt Code. Zwei bewährte Optionen:

The Plus Addons for Elementor. Erweitert das Standard-Akkordeon um die Option Default Open Tab → None, sodass alle Tabs geschlossen bleiben. Die kostenlose Version ist ausreichend. Als Bonus erhalten Sie verschachtelte Akkordeons, Icons aus der Bibliothek, Shortcodes und Elementor-Templates innerhalb von Tabs. WordPress.org-Seite.

Essential Addons for Elementor. Zwei Millionen aktive Installationen. Das Akkordeon dieses Add-ons startet ebenfalls mit geschlossenen Tabs: Die Optionen Accordion State und Enable FAQ Schema befinden sich direkt in den Widget-Einstellungen. Wenn Essential Addons bereits für andere Widgets (Advanced Data Table, Filterable Gallery) installiert ist, ist keine zusätzliche Installation nötig. WordPress.org-Seite.

Der Nachteil liegt auf der Hand: Ein Plugin mit über 100 Widgets für eine einzige Option einzubinden, ist übertrieben. Aber wenn das Add-on bereits in Ihrem Setup vorhanden ist, erhalten Sie eine Ein-Klick-Lösung.

⁉️🤔 Häufig gestellte Fragen

Warum fügt Elementor dem Standard-Akkordeon keinen Schalter hinzu?

Die Entwickler haben keinen genauen Grund genannt. Basierend auf Diskussionen im Elementor GitHub-Repository hält das Team das Verhalten „erster Tab offen" aus Gründen der Barrierefreiheit für korrekt. Funktionsanfragen sind seit 2018 anhängig. Die Entwicklungspriorität hat sich in Richtung KI-Funktionen, Flexbox-Container und Performance verschoben. Bis ein Schalter erscheint, stimmen Sie für das Thema auf GitHub ab und verwenden Sie das Snippet aus Methode 1.

Das Skript funktioniert auf Mobilgeräten nicht. Was soll ich tun?

Auf Smartphones und Tablets verwendet Elementor dasselbe Markup, aber das Rendering ist langsamer: schwächere Prozessoren, mehr asynchrone Anfragen. Erhöhen Sie die setTimeout-Verzögerung auf 500-1000 ms. Das Verschieben des Snippets in den Footer über den wp_footer-Hook hilft ebenfalls: Das Skript wird zuletzt ausgeführt, nach allen Elementor-Stilen und dem Markup. Auf dem Desktop macht es keinen Unterschied, auf Mobilgeräten ist es spürbar.

Kann ich eine jQuery-Version verwenden?

Ja, aber wir empfehlen es nicht. Seit Version 3.0 ist Elementor für das Frontend auf natives JavaScript umgestiegen. Das Vanilla-Snippet aus Methode 1 wiegt etwa 200 Bytes im Vergleich zu 87 KB für jQuery (minifiziert) und hängt nicht vom Laden der Bibliothek ab. Wenn Ihr Theme oder andere Plugins bereits jQuery laden, macht es keinen Unterschied. Für moderne Themes auf reinem JavaScript, wie Hello Elementor, ist die native Option jedoch besser: weniger Abhängigkeiten, höhere Geschwindigkeit.

Die CSS-Methode funktioniert nicht, das erste Element ist immer noch sichtbar.

Ihr Theme überschreibt Elementor-Stile mit höherer Priorität oder verwendet JS, um das Ausklappen zu erzwingen. CSS ist in diesem Szenario machtlos: Das Theme-Skript wird später ausgeführt und öffnet den Tab erneut. Nur das JS-Snippet aus Methode 1 löst den Konflikt zeitlich auf: Es wird zuletzt ausgeführt und übernimmt die Kontrolle.

Funktioniert das Snippet mit benutzerdefinierten Themes und Child-Themes?

Ja. Das Snippet arbeitet mit den eigenen Klassen von Elementor: .elementor-accordion-item, .elementor-tab-title und .elementor-tab-content. Diese hängen nicht vom Theme ab. Wir haben es mit Hello Elementor, Astra, GeneratePress und Kadence getestet: Es funktioniert überall identisch. Die Ausnahme sind Themes, die das Elementor-Widget-Markup vollständig über Filter ersetzen (selten, meist in Premium-Bundles wie Avada).

Akkordeon oder Toggle: Was Sie wählen sollten

Toggle löst das Problem ohne Code, erlaubt Nutzern aber, mehrere Abschnitte gleichzeitig zu öffnen. Für eine FAQ-Seite oder einen Referenzbereich ist das sogar ein Plus: Besucher sehen alle Antworten gleichzeitig. Toggle ist nativ, schnell und erfordert keine Wartung eines Snippets bei Elementor-Updates.

Wenn die Logik „einer offen, der Rest geschlossen" essenziell ist, verwenden Sie Akkordeon und JavaScript aus Methode 1. Das vierzeilige Snippet funktioniert zuverlässig, hängt nicht von der Elementor-Version ab und schließt das Problem vollständig.

Beginnen Sie mit der einfachsten Option: Öffnen Sie den Editor, ersetzen Sie das Akkordeon durch Toggle und prüfen Sie, ob das Verhalten Ihren Vorstellungen entspricht. Falls nicht, greifen Sie auf das Snippet zurück. Fünf Minuten, und das Akkordeon sieht genau so aus, wie Sie es beabsichtigt haben.