Hai aggiunto un accordion in Elementor, compilato la sezione FAQ, salvato la pagina e hai notato che il primo elemento è espanso. Non l'hai aperto tu. Ma Elementor ha deciso per te. Questo comportamento è cablato nel widget e non si può modificare dalle impostazioni. Per una landing page dalla struttura pulita, l'effetto è sciatto e, se il primo blocco è pesante, spezza il ritmo visivo dell'intera pagina.

Il problema esiste da anni. La documentazione ufficiale lo dice chiaramente: «The first item of the Accordion widget is expanded on page load.» Punto. Ma non sei costretto a subire un accordion forzatamente espanso. Ci sono quattro soluzioni, e ognuna include le istruzioni qui sotto.

Ecco i metodi per chiudere l'accordion di Elementor di default: da uno snippet da 30 secondi ad alternative native e addon con un checkbox nell'interfaccia. Questi metodi sono stati testati su Elementor 3.27-4.2 (Free e Pro) e funzionano su desktop e mobile.

💡 Panoramica rapida:

• Inserisci uno snippet JavaScript in un widget HTML o in Codice personalizzato e l'accordion si chiuderà 100 ms dopo il caricamento
• Sostituisci Accordion con Toggle, un widget nativo di Elementor in cui tutte le schede sono chiuse in partenza
• Per i minimalisti: una regola CSS nasconde il primo elemento senza una sola riga di JavaScript
• Installa The Plus Addons o Essential Addons e ottieni un interruttore nativo «First tab open» direttamente nelle impostazioni del widget

Metodo 1: snippet JavaScript, universale

Il metodo più affidabile. Elementor aggiunge la classe elementor-active al primo elemento dell'accordion al caricamento. Devi solo attendere il rendering e rimuovere questa classe.

Uno snippet in JavaScript puro, senza 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>

Il ritardo setTimeout di 100 millisecondi è critico. Senza, lo script viene eseguito prima che Elementor finisca di inizializzare l'accordion e le classi semplicemente non verranno rimosse. Su provider di hosting lenti o pagine con una dozzina di widget, aumentalo a 300-500 ms. Gli utenti Elementor confermano sul forum: il metodo è stabile fino alla versione 4.2.

Dove inserirlo. Due opzioni. Prima, widget HTML: trascinalo direttamente sopra l'accordion nell'editor e incolla lo snippet. Il codice girerà solo su quella pagina specifica e non verrà caricato dove non c'è l'accordion. Seconda, Elementor → Codice personalizzato nel pannello di amministrazione di WordPress: crea una voce, seleziona Posizione body e pubblica. Il codice si applicherà globalmente, comodo quando gli accordion sono sparsi su una dozzina di pagine.

Se hai più accordion e devi chiuderli tutti, sostituisci querySelector con querySelectorAll e itera sulla collezione:

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>

Non ha funzionato al primo tentativo? Quasi sempre è un problema di temporizzazione: aumenta il ritardo a 1000 ms.

Metodo 2: widget Toggle invece di Accordion

Il metodo nativo più semplice non è combattere con l'accordion, ma usare un widget diverso. Elementor offre due strumenti che sembrano simili ma si comportano diversamente: Accordion e Toggle.

La differenza chiave:

Toggle è visivamente indistinguibile da Accordion: le stesse intestazioni, le stesse icone a freccia, la stessa animazione. Ma tutte le schede sono chiuse in partenza, senza bisogno di codice. Apri il pannello dei widget, trova Toggle, trascinalo sulla pagina e aggiungi gli elementi esattamente come in Accordion. Fatto.

L'unica sfumatura: Toggle permette di espandere più schede contemporaneamente. Se la logica «una aperta, le altre chiuse» è importante, torna al Metodo 1.

Metodo 3: CSS, minimalista

JavaScript ti sembra eccessivo? Chiudi il primo elemento con puro 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
}

Il primo selettore nasconde il contenuto della prima scheda. Il secondo rimuove il bordo inferiore dell'intestazione, che senza il contenuto appare come un taglio netto. Inserisci il codice nella sezione «Avanzate → CSS personalizzato» del widget specifico (per un accordion particolare) o in Aspetto → Personalizza → CSS aggiuntivo (globalmente).

Nota: il CSS non rimuove la classe elementor-active ma nasconde solo visivamente il contenuto. Nell'albero DOM, la scheda rimane «attiva». Questo non influisce sulla funzionalità del sito, ma se usi analytics personalizzate per i clic sull'accordion o script di terze parti legati alla classe, il comportamento potrebbe sorprenderti. Per la maggior parte degli scenari, questo metodo funziona ed è il più leggero.

Se il tuo tema sovrascrive gli stili di Elementor, aumenta la specificità:

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

Ancora non funziona? Probabilmente il tema usa un suo JavaScript per forzare l'espansione. Torna al Metodo 1: lo snippet JS viene eseguito dopo e sovrascrive qualsiasi comportamento del tema.

Metodo 4: addon con un interruttore nativo

Alcuni addon di Elementor aggiungono un'opzione «First tab open» ad Accordion, un clic invece di codice. Due opzioni collaudate:

The Plus Addons for Elementor. Estende l'Accordion standard con l'opzione Default Open Tab → None, mantenendo tutte le schede chiuse. La versione gratuita è sufficiente. Come bonus, ottieni accordion annidati, icone dalla libreria, shortcode e template Elementor dentro le schede. Pagina WordPress.org.

Essential Addons for Elementor. Due milioni di installazioni attive. Anche l'Accordion di questo addon parte con le schede chiuse: le opzioni Accordion State e Enable FAQ Schema sono direttamente nelle impostazioni del widget. Se Essential Addons è già installato per altri widget (Advanced Data Table, Filterable Gallery), non serve un'installazione aggiuntiva. Pagina WordPress.org.

Lo svantaggio è ovvio: installare un plugin con oltre 100 widget per una sola opzione è sproporzionato. Ma se l'addon è già nel tuo setup, ottieni una soluzione a un clic.

⁉️🤔 Domande frequenti

Perché Elementor non aggiunge un interruttore all'Accordion standard?

Gli sviluppatori non hanno fornito una ragione esatta. In base alle discussioni nella repository GitHub di Elementor, il team considera il comportamento «prima scheda aperta» corretto per l'accessibilità. Le richieste di funzionalità sono in sospeso dal 2018. La priorità di sviluppo si è spostata verso funzionalità AI, contenitori Flexbox e performance. Finché non arriva un interruttore, vota la issue su GitHub e usa lo snippet del Metodo 1.

Lo script non funziona su mobile. Cosa posso fare?

Su telefoni e tablet, Elementor usa lo stesso markup, ma il rendering è più lento: processori meno potenti, più richieste asincrone. Aumenta il ritardo di setTimeout a 500-1000 ms. Anche spostare lo snippet nel footer tramite l'hook wp_footer aiuta: lo script viene eseguito per ultimo, dopo tutti gli stili e il markup di Elementor. Su desktop non c'è differenza, ma su mobile si nota.

Posso usare una versione jQuery?

Sì, ma non lo consigliamo. Dalla versione 3.0, Elementor è passato a JavaScript nativo per il frontend. Lo snippet vanilla del Metodo 1 pesa circa 200 byte contro gli 87 KB di jQuery (minificato) e non dipende dal caricamento della libreria. Se il tuo tema o altri plugin caricano già jQuery, non fa differenza. Ma per temi moderni in puro JavaScript, come Hello Elementor, l'opzione nativa è migliore: meno dipendenze, maggiore velocità.

Il metodo CSS non funziona; il primo elemento è ancora visibile.

Il tuo tema sovrascrive gli stili di Elementor con priorità più alta o usa JS per forzare l'espansione. In questo scenario il CSS è impotente: lo script del tema viene eseguito dopo e riapre la scheda. Solo lo snippet JS del Metodo 1 risolve il conflitto cronologicamente: viene eseguito per ultimo e prende il controllo.

Lo snippet funziona con temi personalizzati e child theme?

Sì. Lo snippet opera sulle classi proprie di Elementor: .elementor-accordion-item, .elementor-tab-title e .elementor-tab-content. Queste non dipendono dal tema. Abbiamo testato su Hello Elementor, Astra, GeneratePress e Kadence: funziona in modo identico ovunque. L'eccezione sono i temi che sostituiscono completamente il markup dei widget Elementor tramite filtri (raro, per lo più in bundle premium come Avada).

Accordion o Toggle: quale scegliere

Toggle risolve il problema senza codice ma permette agli utenti di espandere più sezioni contemporaneamente. Per una pagina FAQ o una sezione di riferimento, questo è persino un vantaggio: i visitatori vedono tutte le risposte simultaneamente. Toggle è nativo, veloce e non richiede la manutenzione di uno snippet quando Elementor si aggiorna.

Se la logica «una aperta, le altre chiuse» è essenziale, usa Accordion e il JavaScript del Metodo 1. Lo snippet di quattro righe funziona in modo affidabile, non dipende dalla versione di Elementor e chiude la questione completamente.

Parti dall'opzione più semplice: apri l'editor, sostituisci Accordion con Toggle e verifica se il comportamento ti soddisfa. Se così non fosse, torna allo snippet. Cinque minuti e l'accordion appare esattamente come lo avevi pensato.