Dodał/a Pan/Pani akordeon w Elementorze, wypełnił/a sekcję FAQ, zapisał/a stronę i widzi, że pierwszy element jest rozwinięty. Nie otwierał/a go Pan/Pani. Ale Elementor zdecydował za Pana/Panią. To zachowanie jest na stałe wbudowane w widżet i nie da się go zmienić w ustawieniach. Dla landing page’a o schludnej strukturze wygląda to niechlujnie, a jeśli pierwszy blok jest obszerny, psuje wizualny rytm całej strony.

Problem ma wiele lat. Oficjalna dokumentacja mówi wprost: „The first item of the Accordion widget is expanded on page load". I tyle. Ale nie musi Pan/Pani patrzeć na przymusowo rozwinięty akordeon. Są cztery rozwiązania, poniżej każde z instrukcją.

Poniżej sposoby na domyślne zwinięcie akordeonu Elementor: od 30-sekundowego snippetu po natywne alternatywy i dodatki z polem wyboru w interfejsie. Metody przetestowano na Elementor 3.27-4.2 (Free i Pro), działają na desktopie i urządzeniach mobilnych.

💡 Szybki przegląd:

• Proszę wstawić snippet JavaScript w widżecie HTML lub Custom Code, akordeon zamknie się 100 ms po załadowaniu
• Proszę zastąpić Accordion widżetem Toggle, wbudowanym widżetem Elementora, wszystkie zakładki są domyślnie zamknięte
• Dla minimalistów: reguła CSS ukrywa pierwszy element bez ani jednej linii JavaScript
• Proszę zainstalować The Plus Addons lub Essential Addons, otrzyma Pan/Pani natywny przełącznik „Pierwsza zakładka otwarta" bezpośrednio w ustawieniach widżetu

Metoda 1: Snippet JavaScript, uniwersalna

Najbardziej niezawodny sposób. Elementor dodaje klasę elementor-active do pierwszego elementu akordeonu podczas ładowania. Wystarczy poczekać na renderowanie i usunąć tę klasę.

Snippet w czystym JavaScript, bez 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>

Opóźnienie setTimeout wynoszące 100 milisekund jest krytyczne. Bez niego skrypt uruchamia się, zanim Elementor zakończy inicjalizację akordeonu, klasy po prostu nie zostaną usunięte. Na wolnych hostingach lub stronach z kilkunastoma widżetami proszę zwiększyć do 300-500 ms. Użytkownicy Elementora potwierdzają na forum: metoda jest stabilna aż do wersji 4.2.

Gdzie wstawić. Dwie opcje. Pierwsza, widżet HTML: proszę przeciągnąć go bezpośrednio nad akordeon w edytorze i wstawić snippet. Kod zadziała tylko na konkretnej stronie i nie ładuje się tam, gdzie nie ma akordeonu. Druga, Elementor → Custom Code w panelu administracyjnym WordPress: proszę utworzyć wpis, wybrać Location body, opublikować. Kod zostanie zastosowany globalnie, wygodne, gdy akordeony są rozrzucone na kilkunastu stronach.

Jeśli akordeonów jest kilka i trzeba zamknąć je wszystkie, proszę zastąpić querySelector przez querySelectorAll i przejść przez kolekcję:

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>

Nie zadziałało za pierwszym razem? Prawie zawsze chodzi o timing, proszę zwiększyć opóźnienie do 1000 ms.

Metoda 2: Widżet Toggle zamiast Accordion

Najprostszy natywny sposób, nie walczyć z akordeonem, tylko wziąć inny widżet. Elementor dostarcza dwa zewnętrznie podobne, ale różniące się zachowaniem narzędzia: Accordion i Toggle.

Zasadnicza różnica:

Toggle’a wizualnie nie odróżni Pan/Pani od Accordion: te same nagłówki, te same ikony strzałek, ta sama animacja. Ale wszystkie zakładki są domyślnie zamknięte, zero kodu. Proszę otworzyć panel widżetów, znaleźć Toggle, przeciągnąć na stronę i dodać elementy jak w Accordion. Gotowe.

Jedyny niuans: Toggle pozwala rozwinąć kilka zakładek jednocześnie. Jeśli logika „jedna otwarta, reszta zamknięta" jest ważna, proszę wrócić do Metody 1.

Metoda 3: CSS, minimalistyczna

JavaScript wydaje się nadmiarowy? Proszę zamknąć pierwszy element czystym 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
}

Pierwszy selektor ukrywa zawartość pierwszej zakładki. Drugi usuwa dolną krawędź nagłówka, bez zawartości wygląda ona jak urwanie. Proszę umieścić kod w sekcji „Zaawansowane → Niestandardowy CSS" danego widżetu (dla konkretnego akordeonu) lub w Appearance → Customize → Additional CSS (globalnie).

Proszę zwrócić uwagę: CSS nie usuwa klasy elementor-active, a jedynie wizualnie ukrywa zawartość. W drzewie DOM zakładka pozostaje „aktywna". Nie wpływa to na działanie strony, ale jeśli używa Pan/Pani niestandardowej analityki kliknięć w akordeon lub zewnętrznych skryptów powiązanych z klasą, zachowanie może zaskoczyć. Dla większości scenariuszy metoda jest działająca i najłatwiejsza.

Jeśli motyw nadpisuje style Elementora, proszę wzmocnić specyficzność:

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

To też nie pomogło? Prawdopodobnie motyw używa własnego JavaScript do wymuszonego rozwijania. Proszę wrócić do Metody 1, snippet JS uruchamia się później i nadpisuje każde zachowanie motywu.

Metoda 4: Dodatki z natywnym przełącznikiem

Część dodatków do Elementora dodaje w Accordion opcję „Pierwsza zakładka otwarta", jedno kliknięcie zamiast kodu. Dwie sprawdzone opcje:

The Plus Addons for Elementor. Rozszerza standardowy Accordion o opcję Default Open Tab → None, wszystkie zakładki zamknięte. Darmowa wersja wystarczy. Bonusowo otrzymuje Pan/Pani zagnieżdżone akordeony, ikony z biblioteki, shortkody i szablony Elementor wewnątrz zakładek. Strona na WordPress.org.

Essential Addons for Elementor. Dwa miliony aktywnych instalacji. Accordion tego dodatku również startuje z zamkniętymi zakładkami: opcje Accordion State oraz Enable FAQ Schema bezpośrednio w ustawieniach widżetu. Jeśli Essential Addons jest już zainstalowany ze względu na inne widżety (Advanced Data Table, Filterable Gallery), dodatkowa instalacja nie jest potrzebna. Strona na WordPress.org.

Minus jest oczywisty: dla jednej opcji ciągnąć wtyczkę ze 100+ widżetami to przesada. Ale jeśli dodatek jest już w zestawie, otrzymuje Pan/Pani rozwiązanie na jedno kliknięcie.

⁉️🤔 Często zadawane pytania

Dlaczego Elementor nie dodaje przełącznika do standardowego Accordion?

Dokładnej przyczyny deweloperzy nie podają. Sądząc po dyskusjach na repozytorium GitHub Elementora, zespół uważa zachowanie „pierwsza zakładka otwarta" za prawidłowe dla dostępności (accessibility). Prośby o funkcję wiszą od 2018 roku. Priorytet rozwoju jest przesunięty w stronę funkcji AI, kontenerów Flexbox i wydajności. Dopóki przełącznik się nie pojawi, proszę głosować za issue na GitHubie i korzystać ze snippetu z Metody 1.

Skrypt nie działa na urządzeniach mobilnych. Co robić?

Na telefonach i tabletach Elementor używa tego samego znacznika, ale renderowanie jest wolniejsze: słabszy procesor, więcej asynchronicznych zapytań. Proszę zwiększyć opóźnienie setTimeout do 500-1000 ms. Pomaga również przeniesienie snippetu do stopki przez hook wp_footer: skrypt wykonuje się jako ostatni, po wszystkich stylach i znaczniku Elementora. Na desktopie nie ma różnicy, na urządzeniach mobilnych jest zauważalna.

Czy można użyć wersji jQuery?

Tak, ale nie radzimy. Od wersji 3.0 Elementor przeszedł na natywny JavaScript dla frontendu. Waniliowy snippet z Metody 1 waży około 200 bajtów wobec 87 KB jQuery (skompresowane) i nie zależy od podłączenia biblioteki. Jeśli motyw lub inne wtyczki już ciągną jQuery: nie ma różnicy. Ale dla nowoczesnych motywów na czystym JavaScript, takich jak Hello Elementor, lepszy jest wariant natywny: mniej zależności, wyższa prędkość.

Metoda z CSS nie działa, pierwszy element i tak jest widoczny.

Motyw nadpisuje style Elementora z wyższym priorytetem lub używa JS do wymuszonego rozwijania. CSS w tym scenariuszu jest bezsilny: skrypt motywu uruchamia się później i ponownie otwiera zakładkę. Tylko snippet JS z Metody 1 rozwiązuje konflikt chronologicznie: wykonuje się jako ostatni i przejmuje kontrolę.

Czy snippet działa z niestandardowymi motywami i motywami potomnymi?

Tak. Snippet operuje klasami samego Elementora: .elementor-accordion-item, .elementor-tab-title i .elementor-tab-content. Nie zależą one od motywu. Sprawdzaliśmy na Hello Elementor, Astra, GeneratePress i Kadence: wszędzie działa tak samo. Wyjątek: motywy, które całkowicie zastępują znacznik widżetów Elementora przez filtry (zdarza się rzadko, głównie w pakietach premium typu Avada).

Accordion czy Toggle: co wybrać

Toggle rozwiązuje problem bez kodu, ale pozwala użytkownikowi rozwinąć kilka sekcji jednocześnie. Dla strony FAQ lub sekcji pomocy to nawet plus, odwiedzający widzi wszystkie odpowiedzi naraz. Toggle jest natywny, szybki i nie wymaga utrzymywania snippetu podczas aktualizacji Elementora.

Jeśli logika „jedna otwarta, reszta zamknięta" jest kluczowa, proszę wziąć Accordion i JavaScript z Metody 1. Czteroliniowy snippet działa stabilnie, nie zależy od wersji Elementora i zamyka temat całkowicie.

Proszę zacząć od najprostszego: otworzyć edytor, zastąpić Accordion widżetem Toggle i sprawdzić, czy zachowanie odpowiada. Jeśli nie, proszę wrócić do snippetu. Pięć minut i akordeon wygląda tak, jak Pan/Pani zamierzył/a.