Du lade till ett dragspel i Elementor, fyllde i FAQ-sektionen, sparade sidan och märkte att det första objektet är utfällt. Du öppnade det inte. Men Elementor bestämde åt dig. Detta beteende är hårdkodat i widgeten och kan inte ändras i inställningarna. För en landningssida med en ren struktur ser detta slarvigt ut, och om det första blocket är tungt bryter det den visuella rytmen på hela sidan.

Detta problem har funnits i flera år. Den officiella dokumentationen säger rakt ut: "The first item of the Accordion widget is expanded on page load." Punkt. Men du behöver inte stirra på ett påtvingat utfällt dragspel. Det finns fyra lösningar, och var och en innehåller instruktioner nedan.

Här är metoder för att stänga Elementors dragspel som standard: från ett 30-sekunders kodsnutt till inbyggda alternativ och tillägg med en kryssruta i gränssnittet. Dessa metoder har testats på Elementor 3.27-4.2 (Free och Pro) och fungerar på dator och mobil.

💡 Snabb översikt:

• Infoga ett JavaScript-kodsnutt i en HTML-widget eller anpassad kod, så stängs dragspelet 100 ms efter laddning
• Byt ut Dragspel mot Toggle, en inbyggd Elementor-widget där alla flikar är stängda från start
• För minimalister: en CSS-regel döljer det första elementet utan en enda rad JavaScript
• Installera The Plus Addons eller Essential Addons och få en inbyggd "First tab open"-växel direkt i widgetens inställningar

Metod 1: JavaScript-kodsnutt, universell

Den mest pålitliga metoden. Elementor lägger till klassen elementor-active på det första dragspelsobjektet vid laddning. Du behöver bara vänta på renderingen och ta bort denna klass.

Ett kodsnutt i ren JavaScript, utan 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>

Fördröjningen setTimeout på 100 millisekunder är kritisk. Utan den körs skriptet innan Elementor har initierat dragspelet färdigt, och klasserna tas helt enkelt inte bort. På långsamma webbhotell eller sidor med ett dussin widgets, öka den till 300-500 ms. Elementor-användare bekräftar på forumet: metoden är stabil upp till version 4.2.

Var du ska infoga det. Två alternativ. För det första, HTML-widget: dra den direkt ovanför dragspelet i redigeraren och klistra in kodsnutten. Koden körs bara på den specifika sidan och laddas inte där det inte finns något dragspel. För det andra, Elementor → Anpassad kod i WordPress adminpanel: skapa en post, välj Plats body och publicera. Koden kommer att gälla globalt, vilket är praktiskt när dragspel är utspridda över ett dussin sidor.

Om du har flera dragspel och behöver stänga dem alla, ersätt querySelector med querySelectorAll och iterera genom 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>

Fungerade det inte vid första försöket? Nästan alltid är det en tidsproblem: öka fördröjningen till 1000 ms.

Metod 2: Toggle-widget istället för Dragspel

Den enklaste inbyggda metoden är att inte kämpa med dragspelet utan att använda en annan widget. Elementor levereras med två verktyg som ser likadana ut men beter sig olika: Dragspel och Toggle.

Den viktigaste skillnaden:

Toggle går inte att skilja visuellt från Dragspel: samma rubriker, samma pilikoner, samma animation. Men alla flikar är stängda från start, ingen kod behövs. Öppna widgetpanelen, hitta Toggle, dra den till sidan och lägg till objekt precis som i Dragspel. Klart.

Den enda nyansen: Toggle tillåter att flera flikar fälls ut samtidigt. Om logiken "en öppen, resten stängda" är viktig, gå tillbaka till Metod 1.

Metod 3: CSS, minimalistisk

Känns JavaScript överdrivet? Stäng det första 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örsta selektorn döljer innehållet i den första fliken. Den andra tar bort den nedre kanten på rubriken, vilket ser ut som ett abrupt avbrott utan innehållet. Placera koden i sektionen "Avancerat → Anpassad CSS" för den specifika widgeten (för ett enskilt dragspel) eller i Utseende → Anpassa → Extra CSS (globalt).

Observera: CSS tar inte bort klassen elementor-active utan döljer bara innehållet visuellt. I DOM-trädet förblir fliken "aktiv". Detta påverkar inte webbplatsens funktionalitet, men om du använder anpassad analys för dragspelsklick eller tredjepartsskript kopplade till klassen kan beteendet överraska dig. För de flesta scenarier fungerar denna metod och är den lättaste.

Om ditt tema åsidosätter Elementors stilar, öka specificiteten:

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

Fungerade det fortfarande inte? Temat använder förmodligen sin egen JavaScript för att tvinga fram utfällning. Gå tillbaka till Metod 1: JS-kodsnutten körs senare och åsidosätter alla temabeteenden.

Metod 4: tillägg med en inbyggd växel

Vissa Elementor-tillägg lägger till ett "First tab open"-alternativ till Dragspel, ett klick istället för kod. Två beprövade alternativ:

The Plus Addons for Elementor. Utökar standarddragspelet med alternativet Default Open Tab → None, vilket håller alla flikar stängda. Gratisversionen räcker. Som bonus får du nästlade dragspel, ikoner från biblioteket, shortcodes och Elementor-mallar inuti flikar. WordPress.org-sida.

Essential Addons for Elementor. Två miljoner aktiva installationer. Detta tilläggs Dragspel börjar också med stängda flikar: alternativen Accordion State och Enable FAQ Schema finns direkt i widgetens inställningar. Om Essential Addons redan är installerat för andra widgets (Advanced Data Table, Filterable Gallery) behövs ingen ytterligare installation. WordPress.org-sida.

Nackdelen är uppenbar: att dra in ett tillägg med 100+ widgets för ett alternativ är overkill. Men om tillägget redan finns i din installation får du en enklickslösning.

⁉️🤔 Vanliga frågor

Varför lägger inte Elementor till en växel i standarddragspelet?

Utvecklarna har inte gett någon exakt anledning. Baserat på diskussioner i Elementors GitHub-repository anser teamet att beteendet "första fliken öppen" är korrekt för tillgänglighet. Funktionsförfrågningar har varit öppna sedan 2018. Utvecklingsprioriteten har skiftat mot AI-funktioner, Flexbox-containers och prestanda. Tills en växel dyker upp, rösta på ärendet på GitHub och använd kodsnutten från Metod 1.

Skriptet fungerar inte på mobilen. Vad ska jag göra?

På telefoner och surfplattor använder Elementor samma märkspråk, men renderingen är långsammare: svagare processorer, fler asynkrona anrop. Öka setTimeout-fördröjningen till 500-1000 ms. Att flytta kodsnutten till sidfoten via wp_footer-hooken hjälper också: skriptet körs sist, efter all Elementor-stil och märkspråk. På datorn är det ingen skillnad, men på mobilen märks det.

Kan jag använda en jQuery-version?

Ja, men vi rekommenderar det inte. Sedan version 3.0 har Elementor bytt till inbyggd JavaScript för frontend. Vanilla-kodsnutten från Metod 1 väger cirka 200 byte jämfört med 87 KB för jQuery (minifierad) och är inte beroende av att biblioteket laddas. Om ditt tema eller andra tillägg redan laddar jQuery är det ingen skillnad. Men för moderna teman på ren JavaScript, som Hello Elementor, är det inbyggda alternativet bättre: färre beroenden, högre hastighet.

CSS-metoden fungerar inte; det första objektet är fortfarande synligt.

Ditt tema åsidosätter Elementors stilar med högre prioritet eller använder JS för att tvinga fram utfällning. CSS är maktlöst i detta scenario: temats skript körs senare och öppnar fliken igen. Endast JS-kodsnutten från Metod 1 löser konflikten kronologiskt: den körs sist och tar kontroll.

Fungerar kodsnutten med anpassade teman och barnteman?

Ja. Kodsnutten arbetar på Elementors egna klasser: .elementor-accordion-item, .elementor-tab-title och .elementor-tab-content. Dessa är inte beroende av temat. Vi testade på Hello Elementor, Astra, GeneratePress och Kadence: det fungerar identiskt överallt. Undantaget är teman som helt ersätter Elementors widget-märkspråk via filter (sällsynt, mest i premiumpaket som Avada).

Dragspel eller Toggle: vilken ska du välja

Toggle löser problemet utan kod men låter användare fälla ut flera sektioner samtidigt. För en FAQ-sida eller referenssektion är detta till och med ett plus: besökare ser alla svar samtidigt. Toggle är inbyggt, snabbt och kräver inte underhåll av ett kodsnutt när Elementor uppdateras.

Om logiken "en öppen, resten stängda" är avgörande, använd Dragspel och JavaScript från Metod 1. Kodsnutten på fyra rader fungerar pålitligt, är inte beroende av Elementor-versionen och stänger ärendet helt.

Börja med det enklaste alternativet: öppna redigeraren, ersätt Dragspel med Toggle och kontrollera om beteendet passar dig. Om inte, gå tillbaka till kodsnutten. Fem minuter, och dragspelet ser ut precis som du avsåg.