--- title: "Accordion menu nei siti web: cos’è e come si crea" url: https://www.conseolente.it/accordion-menu-siti-web-cose-come-si-crea/ aggiornato: 2026-10-29 descrizione: "Scopri cos'è un accordion menu per siti web, come funziona e come crearlo con HTML, CSS, JavaScript e plugin. Guida completa all'implementazione." topic: "Accordion menu · creazione · menu a fisarmonica" --- # Accordion menu nei siti web: cos’è e come si crea > Versione per assistenti AI. Pagina originale: [Accordion menu nei siti web: cos’è e come si crea](https://www.conseolente.it/accordion-menu-siti-web-cose-come-si-crea/?via=md) L’accordion è il componente di interfaccia che organizza contenuti lunghi in sezioni verticali espandibili e comprimibili, mostrando un solo blocco di testo alla volta dopo il clic su un’intestazione. In questa pagina il termine accordion indica esclusivamente il menu a fisarmonica per siti web, nell’ambito di [Siti web](https://www.conseolente.it/category/siti-web/). Serve a ridurre lo scroll e a migliorare la lettura su schermi di ogni dimensione. ## In breve - **Cosa risolve:** comprime testi lunghi (FAQ, descrizioni, menu di navigazione) in pannelli che l’utente apre su richiesta. - **Quando si applica:** quando una pagina contiene più argomenti paralleli e serve ridurre il disordine visivo, soprattutto da mobile. - **Condizioni e limiti:** senza JavaScript non è possibile forzare la chiusura automatica degli altri pannelli; con i tag nativi la gestione resta semplice ma meno controllabile. - **Come verificare:** si controlla che il contenuto chiuso resti comunque leggibile dai motori di ricerca e navigabile da tastiera. - **Cosa fare:** si sceglie la tecnica (HTML puro, JavaScript, plugin o framework) in base alla piattaforma già usata per il sito. ## Cos’è un accordion menu e come è strutturato ![Pannelli verticali di un menu a fisarmonica con uno aperto e due chiusi](https://www.conseolente.it/wp-content/uploads/2026/10/accordion-menu-siti-web-cose-come-si-crea-1-1024x683.webp) Struttura tipica di un accordion: intestazioni cliccabili sopra i rispettivi pannelli di contenuto. Un accordion menu è formato da una serie di intestazioni affiancate a un’icona di stato e da pannelli di contenuto nascosti finché l’utente non clicca sull’intestazione corrispondente. Ogni blocco funziona come un’unità autonoma: titolo visibile, contenuto collassato, indicatore grafico (di solito una freccia o un simbolo +/-) che segnala se il pannello è aperto o chiuso. La distinzione principale riguarda il comportamento tra più pannelli. Nella modalità esclusiva, l’apertura di una sezione chiude automaticamente quella precedente, così resta visibile un solo contenuto per volta; nella modalità non esclusiva, più pannelli possono restare aperti insieme, utile quando l’utente deve confrontare informazioni tra loro. La scelta tra le due modalità dipende dal tipo di contenuto: le FAQ si prestano spesso alla modalità esclusiva, mentre i confronti tra caratteristiche di prodotto beneficiano della modalità non esclusiva. A livello di markup, la struttura minima prevede un contenitore, un elemento cliccabile per il titolo e un elemento collegato per il contenuto, gestito tramite attributi come aria-expanded e aria-controls quando si vuole garantire la navigazione da tastiera. Questa struttura resta identica sia che l’accordion venga realizzato con tag nativi, sia che venga gestito tramite script o plugin: cambia solo il meccanismo che attiva l’apertura e la chiusura del pannello. L’orientamento più diffuso è verticale, pensato per elenchi di voci che scorrono dall’alto verso il basso; esistono anche varianti orizzontali, meno comuni, in cui i pannelli si espandono lateralmente. La scelta dell’orientamento dipende dallo spazio disponibile nel layout e dal tipo di navigazione che la pagina richiede. ## Vantaggi di un accordion menu nel sito web Il primo beneficio è il risparmio di spazio verticale: una pagina con venti domande frequenti mostra solo venti titoli, non venti risposte complete, e l’utente apre soltanto quella che gli interessa. Questo riduce il peso percepito della pagina senza eliminare informazioni. Il secondo beneficio riguarda la leggibilità. Nascondere i blocchi non pertinenti al momento della lettura riduce il disordine visivo e aiuta chi naviga a concentrarsi su un solo argomento per volta, evitando la dispersione tipica di pagine con testi lunghi mostrati tutti insieme. Il terzo beneficio riguarda l’uso da dispositivi mobili e touch. Su schermi stretti, un accordion elimina la necessità di scorrere a lungo tra sezioni poco rilevanti: il tocco sull’intestazione sostituisce lo scroll continuo e il contenuto si adatta automaticamente alla larghezza disponibile. Il passaggio da interazione hover (desktop) a interazione a tocco (mobile) avviene senza modifiche al markup, cambia solo l’evento che attiva l’apertura. Un quarto vantaggio, meno discusso ma concreto, riguarda il caricamento della pagina: quando il contenuto di un pannello viene caricato solo al momento dell’apertura (tramite script), il peso iniziale della pagina si riduce, a vantaggio dei tempi di caricamento percepiti su connessioni lente. Questi vantaggi valgono soprattutto per contenuti testuali ripetitivi o gerarchici: domande e risposte, descrizioni di prodotto con più attributi, categorie e sottocategorie di un catalogo. Per contenuti brevi o già compatti, un accordion aggiunge un clic superfluo e può ridurre, non aumentare, la chiarezza della pagina. ## Come creare un accordion con solo HTML e CSS Il metodo più leggero utilizza i tag nativi
e , elementi HTML5 che gestiscono apertura e chiusura senza una sola riga di JS. Il tag contiene il titolo cliccabile, mentre tutto ciò che sta dentro
dopo il summary rappresenta il contenuto che si rivela al clic. 1. Si racchiude ogni blocco di contenuto in un elemento
. 2. Si inserisce il titolo del pannello dentro un , come primo figlio dell’elemento. 3. Si aggiunge il testo o il markup del contenuto subito dopo il summary, all’interno dello stesso
. 4. Si applicano stili CSS su summary e sul contenuto per gestire bordi, spaziature e il cursore a mano sul titolo. 5. Si ripete la struttura per ogni voce dell’accordion, lasciando che il browser gestisca apertura e chiusura in modo nativo. Rispetto a uno script esterno, questo metodo garantisce accessibilità di base senza configurazione aggiuntiva: il browser associa automaticamente la semantica corretta per i lettori di schermo e la navigazione da tastiera funziona senza attributi ARIA manuali. Il limite principale è che
non chiude automaticamente gli altri pannelli quando se ne apre uno nuovo: per un accordion esclusivo costruito solo con HTML serve raggruppare più elementi
con lo stesso attributo name, supportato dai browser più recenti; in caso contrario resta necessario un intervento di script. Un’alternativa solo CSS, senza tag nativi, usa un input nascosto di tipo checkbox abbinato al selettore :checked: il clic sulla label associata cambia lo stato del checkbox e il CSS mostra o nasconde il pannello collegato tramite i selettori di fratellanza. Questa tecnica richiede più markup di supporto rispetto a
, ma permette transizioni di altezza più controllate tramite proprietà come max-height e transition. ## Come creare un accordion con JavaScript e jQuery ![Schema di un evento click che apre un pannello e aggiunge una classe CSS attiva](https://www.conseolente.it/wp-content/uploads/2026/10/accordion-menu-siti-web-cose-come-si-crea-2-1024x683.webp) Flusso tipico: il clic sull’intestazione aggiunge una classe, la classe attiva l’animazione del pannello. Con JavaScript puro, il comportamento dell’accordion si ottiene associando un listener di clic a ogni intestazione: al clic, il metodo classList.toggle aggiunge o rimuove una classe sul pannello successivo, mentre una seconda classe gestisce la rotazione dell’icona. Questa soluzione non richiede librerie esterne e resta leggera anche su pagine con molte voci. Per ottenere un comportamento esclusivo (un solo pannello aperto alla volta), la funzione di clic deve prima rimuovere la classe attiva da tutte le intestazioni diverse da quella selezionata, poi attivare quella corrente: in questo modo l’apertura di una nuova sezione chiude automaticamente quella precedente, senza bisogno di animare manualmente ogni chiusura. Con jQuery lo stesso risultato si ottiene con meno codice, grazie ai metodi slideToggle e slideUp, che animano l’altezza del pannello con una durata configurabile (un valore tipico è 300 millisecondi). Lo script nasconde i pannelli al caricamento della pagina, poi gestisce il clic sulle intestazioni rimuovendo lo stato “aperto” dalle altre voci e alternando quello della voce selezionata. **Se il sito carica già jQuery per altre funzionalità:** conviene riutilizzare la libreria per l’accordion, evitando di introdurre due approcci diversi nella stessa pagina. **Se il sito non usa jQuery e punta a ridurre il peso degli script:** JavaScript vanilla con classList.toggle ottiene lo stesso risultato senza dipendenze aggiuntive da caricare. In entrambi i casi, lo stato visivo dell’icona (rotazione di 45 gradi, cambio di colore) va sincronizzato con lo stato reale del pannello tramite la stessa classe CSS che attiva l’animazione, così da evitare che icona e contenuto risultino disallineati dopo interazioni rapide dell’utente. ## Plugin e page builder per creare un accordion senza scrivere codice Su un CMS come WordPress, un accordion si crea anche senza intervenire sul codice, tramite blocchi o plugin dedicati che aggiungono il componente direttamente nell’editor. Questi strumenti gestiscono apertura, animazione e icone con un’interfaccia visuale, senza richiedere la scrittura di HTML, CSS o JavaScript. La differenza principale è tra plugin monofunzione, pensati solo per l’accordion, e suite più ampie che includono l’accordion insieme ad altri componenti (tab, caroselli, box icona). Le suite complete tendono a offrire più opzioni di personalizzazione e un solo aggiornamento da gestire, a scapito di un pacchetto di funzioni più ampio da caricare anche quando se ne usa solo una parte. Oltre ai plugin dedicati, i costruttori visuali come Elementor integrano un widget accordion pronto all’uso, mentre piattaforme chiuse come Wix offrono un blocco accordion configurabile direttamente dall’editor del sito, senza possibilità di accedere al codice sottostante. Lo stesso approccio no-code si ritrova in altri ambiti dell’intelligenza artificiale no-code, dove l’utente configura un comportamento complesso tramite interfaccia, senza scrivere istruzioni. **Se il sito è su WordPress e serve solo un accordion semplice per le FAQ:** un plugin monofunzione riduce il peso rispetto a una suite completa. **Se il sito usa già un page builder con widget accordion integrato:** conviene usare quello nativo, per evitare di caricare un plugin aggiuntivo con funzioni che si sovrappongono. Va considerato anche l’effetto sulla visibilità nei motori di ricerca: contenuto inserito in un pannello chiuso tramite plugin resta comunque presente nel codice della pagina e indicizzabile, a condizione che il plugin non lo carichi dinamicamente solo dopo il clic dell’utente. Questo aspetto, insieme ad altre buone pratiche, rientra nelle verifiche tipiche di come fare SEO su WordPress. ## Framework pronti: l’accordion con Bootstrap Collapse Chi sviluppa un sito con il framework Bootstrap può ottenere un comportamento ad accordion senza scrivere animazioni CSS personalizzate, utilizzando il componente Collapse già incluso nel framework. La struttura prevede un contenitore con classi predefinite e attributi data-bs-toggle e data-bs-target che collegano ogni intestazione al pannello corrispondente. Questo approccio è coerente con il resto dello sviluppo web e software quando un progetto adotta già Bootstrap per layout, griglia e componenti di interfaccia: evita di mescolare due sistemi di stile diversi per uno stesso elemento ricorrente come l’accordion. Il comportamento esclusivo (un solo pannello aperto per volta) si attiva raggruppando i pannelli sotto lo stesso contenitore genitore indicato nell’attributo di collegamento. Il vantaggio principale rispetto a uno script scritto da zero è la manutenzione: gli aggiornamenti del framework includono eventuali correzioni di accessibilità e compatibilità tra browser, senza che sia necessario rivedere il codice dell’accordion a ogni modifica. Il limite è la dipendenza dal framework stesso: introdurre Bootstrap solo per un accordion, su un sito che non lo usa altrove, aggiunge un peso di script e fogli di stile non giustificato dalla sola funzionalità. ## Confronto tra i metodi per creare un accordion | Metodo | Dipendenze | Chiusura automatica altri pannelli | Accessibilità di base | | --- | --- | --- | --- | | HTML
/ | Nessuna | Solo con attributo name nei browser che lo supportano | Nativa | | CSS con :checked | Nessuna | Richiede markup aggiuntivo (radio button) | Parziale, da rifinire | | JavaScript vanilla | Nessuna | Sì, gestita nello script | Da aggiungere manualmente con ARIA | | jQuery | Libreria jQuery | Sì, con poche righe di codice | Da aggiungere manualmente con ARIA | | Plugin/page builder | Plugin o builder del CMS | Variabile, dipende dall’impostazione del plugin | Variabile, dipende dal plugin | | Bootstrap Collapse | Framework Bootstrap | Sì, con raggruppamento dei pannelli | Buona, documentata dal framework | ## Accessibilità, SEO ed errori frequenti nell’accordion Un accordion accessibile richiede che ogni intestazione sia raggiungibile da tastiera, tramite tabulazione, e che lo stato del pannello sia comunicato ai lettori di schermo tramite l’attributo aria-expanded, aggiornato a true o false a ogni apertura e chiusura. L’attributo aria-controls collega l’intestazione all’id del pannello corrispondente, così lo screen reader può annunciare quale contenuto si sta aprendo. Sul fronte della visibilità nei motori di ricerca, il contenuto racchiuso in un pannello chiuso viene comunque letto se presente nel markup DOM al caricamento della pagina: il problema si presenta solo quando lo script inserisce il testo dinamicamente dopo il clic, rendendolo assente al primo caricamento. Per questo motivo, nelle implementazioni con JavaScript o plugin conviene verificare che il contenuto sia già presente nel codice sorgente, semplicemente nascosto via CSS, e non generato solo dopo l’interazione dell’utente. Tra gli errori più comuni: icone che non si sincronizzano con lo stato reale del pannello dopo clic rapidi; animazioni di altezza impostate su valori fissi in pixel, che troncano il contenuto quando il testo è più lungo del previsto, invece di usare un’altezza calcolata dinamicamente; assenza di un attributo univoco sugli id dei pannelli, che spezza il collegamento tra intestazione e contenuto quando più accordion sono presenti nella stessa pagina. Un ultimo errore riguarda l’uso eccessivo della modalità esclusiva su contenuti che l’utente deve confrontare tra loro: in quel caso, obbligare alla chiusura del pannello precedente costringe a riaprirlo più volte, peggiorando l’esperienza invece di migliorarla. ## Domande frequenti sull’accordion menu ### Cos’è un accordion menu in un sito web? È un componente che mostra intestazioni cliccabili collegate a pannelli di contenuto nascosti, visibili solo dopo il clic. Serve a organizzare contenuti lunghi o ripetitivi, come FAQ o elenchi di categorie, senza occupare tutto lo spazio verticale della pagina. ### Quali sono i vantaggi di un accordion menu? Riduce lo spazio occupato dai contenuti, migliora la leggibilità eliminando il disordine visivo e si adatta bene ai dispositivi touch, dove il tocco sostituisce lo scroll continuo tra sezioni poco rilevanti. ### Come si crea un accordion con solo HTML e CSS? Si usano i tag nativi
e , che gestiscono apertura e chiusura senza script: il summary contiene il titolo, il resto del contenuto all’interno di details si rivela al clic, con accessibilità di base garantita dal browser. ### Qual è la differenza tra accordion esclusivo e non esclusivo? Nell’accordion esclusivo l’apertura di un pannello chiude automaticamente quello precedente, mostrando un solo contenuto alla volta; in quello non esclusivo più pannelli restano aperti insieme, utile per confrontare informazioni diverse nella stessa pagina. ### Quali plugin si possono usare per un accordion su WordPress? Esistono plugin monofunzione dedicati solo all’accordion e suite più ampie che includono anche tab e caroselli. La scelta dipende dal numero di componenti simili già presenti nel sito e dal peso di script che si vuole caricare. ### Un accordion nasconde i contenuti a Google? No, se il testo è già presente nel codice della pagina e viene solo nascosto tramite CSS; il problema si verifica unicamente quando il contenuto viene caricato dinamicamente dopo il clic dell’utente, risultando assente al primo caricamento della pagina. ### Come si rende un accordion navigabile da tastiera? Le intestazioni devono essere raggiungibili con il tasto tabulazione e lo stato del pannello va comunicato tramite l’attributo aria-expanded, aggiornato a ogni apertura o chiusura, insieme a aria-controls per collegare intestazione e contenuto. ### Quando conviene usare Bootstrap Collapse invece di uno script personalizzato? Conviene quando il sito utilizza già Bootstrap per altri componenti dell’interfaccia: evita di introdurre un secondo sistema di stile solo per l’accordion e beneficia degli aggiornamenti di accessibilità mantenuti dal framework.