Du la til en trekkspillmeny i Elementor, fylte inn FAQ-seksjonen, lagret siden og la merke til at det første elementet er utvidet. Du åpnet det ikke. Men Elementor bestemte det for deg. Denne oppførselen er hardkodet inn i widgeten og kan ikke endres i innstillingene. For en landingsside med en ryddig struktur ser dette slurvete ut, og hvis den første blokken er tung, ødelegger det den visuelle rytmen på hele siden.

Dette problemet har eksistert i årevis. Den offisielle dokumentasjonen sier det direkte: «Det første elementet i trekkspill-widgeten utvides ved sidelasting.» Det er alt. Men du trenger ikke å stirre på et tvangsutvidet trekkspill. Det finnes fire løsninger, og hver av dem inkluderer instruksjoner nedenfor.

Nedenfor finner du metoder for å lukke Elementor-trekkspillet som standard: fra en 30-sekunders kodebit til native alternativer og tillegg med en avkrysningsboks i grensesnittet. Disse metodene er testet på Elementor 3.27-4.2 (Free og Pro) og fungerer på desktop og mobil.

💡 Rask oversikt:

• Sett inn en JavaScript-kodebit i en HTML-widget eller Custom Code, så lukkes trekkspillet 100 ms etter lasting
• Bytt ut trekkspill med Toggle, en innebygd Elementor-widget der alle faner er lukket ut av boksen
• For minimalister: en CSS-regel skjuler det første elementet uten en eneste linje JavaScript
• Installer The Plus Addons eller Essential Addons og få en native bryter for «First tab open» rett i widget-innstillingene

Metode 1: JavaScript-kodebit, universell

Den mest pålitelige metoden. Elementor legger til klassen elementor-active på det første trekkspillelementet ved lasting. Du trenger bare å vente på renderingen og fjerne denne klassen.

En kodebit i ren JavaScript, uten 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>

Forsinkelsen på 100 millisekunder i setTimeout er kritisk. Uten den kjører skriptet før Elementor er ferdig med å initialisere trekkspillet, og klassene blir rett og slett ikke fjernet. På trege hostingleverandører eller sider med et dusin widgeter, øk den til 300-500 ms. Elementor-brukere bekrefter på forumet: metoden er stabil opp til versjon 4.2.

Hvor du setter den inn. To alternativer. For det første, HTML-widget: dra den rett over trekkspillet i editoren og lim inn kodebiten. Koden kjører bare på den spesifikke siden og lastes ikke der det ikke er noe trekkspill. For det andre, Elementor → Custom Code i WordPress-administrasjonspanelet: opprett en oppføring, velg plassering body og publiser. Koden vil gjelde globalt, noe som er praktisk når trekkspill er spredt over et dusin sider.

Hvis du har flere trekkspill og trenger å lukke alle, bytt ut querySelector med querySelectorAll og iterer gjennom samlingen:

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>

Fungerte det ikke på første forsøk? Nesten alltid er det et tidsproblem: øk forsinkelsen til 1000 ms.

Metode 2: Toggle-widget i stedet for trekkspill

Den enkleste native metoden er ikke å kjempe mot trekkspillet, men å bruke en annen widget. Elementor leverer to verktøy som ser like ut, men oppfører seg forskjellig: Trekkspill og Toggle.

Nøkkelforskjellen:

Toggle er visuelt umulig å skille fra trekkspill: de samme overskriftene, de samme pilikonene, den samme animasjonen. Men alle faner er lukket ut av boksen, ingen kode nødvendig. Åpne widget-panelet, finn Toggle, dra den til siden og legg til elementer akkurat som i trekkspill. Ferdig.

Den eneste nyansen: Toggle tillater utvidelse av flere faner samtidig. Hvis logikken «én åpen, resten lukket» er viktig, gå tilbake til Metode 1.

Metode 3: CSS, minimalistisk

Virker JavaScript overdrevent? Lukk det første elementet med ren 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
}

Den første selektoren skjuler innholdet i den første fanen. Den andre fjerner bunnkanten på overskriften, som ser ut som et brått avbrudd uten innholdet. Plasser koden i «Avansert → Egendefinert CSS»-delen for den spesifikke widgeten (for et bestemt trekkspill) eller i Utseende → Tilpass → Ekstra CSS (globalt).

Merk: CSS fjerner ikke klassen elementor-active, men skjuler bare innholdet visuelt. I DOM-treet forblir fanen «aktiv». Dette påvirker ikke nettstedets funksjonalitet, men hvis du bruker egendefinert analyse for trekkspillklikk eller tredjepartsskripter knyttet til klassen, kan oppførselen overraske deg. For de fleste scenarier fungerer denne metoden og er den letteste.

Hvis temaet ditt overstyrer Elementor-stiler, øk spesifisiteten:

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

Fungerte det fortsatt ikke? Temaet bruker sannsynligvis sin egen JavaScript for å tvinge utvidelse. Gå tilbake til Metode 1: JS-kodebiten utløses senere og overstyrer enhver tema-oppførsel.

Metode 4: tillegg med en native bryter

Noen Elementor-tillegg legger til et «First tab open»-alternativ til trekkspill, ett klikk i stedet for kode. To velprøvde alternativer:

The Plus Addons for Elementor. Utvider standard trekkspill med Default Open Tab → None-alternativet, og holder alle faner lukket. Gratisversjonen er tilstrekkelig. Som en bonus får du nestede trekkspill, ikoner fra biblioteket, shortcodes og Elementor-maler inne i faner. WordPress.org-side.

Essential Addons for Elementor. To millioner aktive installasjoner. Dette tilleggets trekkspill starter også med lukkede faner: alternativene Accordion State og Enable FAQ Schema er rett i widget-innstillingene. Hvis Essential Addons allerede er installert for andre widgeter (Advanced Data Table, Filterable Gallery), er ingen ekstra installasjon nødvendig. WordPress.org-side.

Ulempen er åpenbar: å dra inn en plugin med 100+ widgeter for ett alternativ er overkill. Men hvis tillegget allerede er i oppsettet ditt, får du en ettklikksløsning.

⁉️🤔 Ofte stilte spørsmål

Hvorfor legger ikke Elementor til en bryter i standard trekkspill?

Utviklerne har ikke gitt en eksakt grunn. Basert på diskusjoner i Elementor GitHub-repositoriet, anser teamet oppførselen «første fane åpen» som riktig for tilgjengelighet. Funksjonsforespørsler har vært ventende siden 2018. Utviklingsprioriteten har skiftet mot AI-funksjoner, Flexbox-containere og ytelse. Inntil en bryter dukker opp, stem på saken på GitHub og bruk kodebiten fra Metode 1.

Skriptet fungerer ikke på mobil. Hva bør jeg gjøre?

På telefoner og nettbrett bruker Elementor samme markup, men renderingen er tregere: svakere prosessorer, flere asynkrone forespørsler. Øk setTimeout-forsinkelsen til 500-1000 ms. Å flytte kodebiten til bunnteksten via wp_footer-hooken hjelper også: skriptet kjøres sist, etter alle Elementor-stiler og markup. På desktop er det ingen forskjell, men på mobil er det merkbart.

Kan jeg bruke en jQuery-versjon?

Ja, men vi anbefaler det ikke. Siden versjon 3.0 har Elementor byttet til native JavaScript for frontend. Vanilla-kodebiten fra Metode 1 veier omtrent 200 byte sammenlignet med 87 KB for jQuery (minifisert) og er ikke avhengig av lasting av biblioteket. Hvis temaet ditt eller andre plugins allerede laster jQuery, er det ingen forskjell. Men for moderne temaer på ren JavaScript, som Hello Elementor, er det native alternativet bedre: færre avhengigheter, høyere hastighet.

CSS-metoden fungerer ikke; det første elementet er fortsatt synlig.

Temaet ditt overstyrer Elementor-stiler med høyere prioritet eller bruker JS for å tvinge utvidelse. CSS er maktesløst i dette scenariet: temaskriptet utløses senere og åpner fanen på nytt. Bare JS-kodebiten fra Metode 1 løser konflikten kronologisk: den kjøres sist og tar kontroll.

Fungerer kodebiten med egendefinerte temaer og child themes?

Ja. Kodebiten opererer på Elementors egne klasser: .elementor-accordion-item, .elementor-tab-title og .elementor-tab-content. Disse avhenger ikke av temaet. Vi testet på Hello Elementor, Astra, GeneratePress og Kadence: det fungerer identisk overalt. Unntaket er temaer som fullstendig erstatter Elementor-widget-markup via filtre (sjeldent, for det meste i premium-pakker som Avada).

Trekkspill eller Toggle: hva du bør velge

Toggle løser problemet uten kode, men lar brukere utvide flere seksjoner samtidig. For en FAQ-side eller referanseseksjon er dette til og med et pluss: besøkende ser alle svar samtidig. Toggle er native, rask og krever ikke vedlikehold av en kodebit når Elementor oppdateres.

Hvis logikken «én åpen, resten lukket» er essensiell, bruk trekkspill og JavaScript fra Metode 1. Kodebiten på fire linjer fungerer pålitelig, avhenger ikke av Elementor-versjonen og lukker problemet fullstendig.

Start med det enkleste alternativet: åpne editoren, bytt ut trekkspill med Toggle og sjekk om oppførselen passer deg. Hvis ikke, gå tilbake til kodebiten. Fem minutter, og trekkspillet ser akkurat ut slik du hadde tenkt.