Accordion accessibile con details
Sezioni apribili senza JavaScript.
Quando si usa
Quando una pagina contiene domande frequenti, spiegazioni lunghe o contenuti secondari che non devono essere tutti visibili subito.
Perché si usa
Gli elementi details e summary sono nativi del browser, funzionano anche senza JavaScript e mantengono una buona accessibilità da tastiera.
Vantaggi principali
- Nessuna libreria necessaria
- Comportamento già supportato dal browser
- Pagina più compatta e ordinata
Anteprima del risultato
L'accordion permette di mostrare solo il titolo e aprire il contenuto quando serve, riducendo l'ingombro della pagina.
Che cosa contiene questa sezione?
Un testo espandibile che l'utente può aprire e chiudere senza JavaScript.
Quando è utile?
Per FAQ, programmi di lezione, regolamenti o istruzioni divise per punti.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<div class="accordion">
<details>
<summary>Che cos'è questo servizio?</summary>
<p>Qui puoi inserire una risposta completa.</p>
</details>
<details>
<summary>Come posso iniziare?</summary>
<p>Descrivi i passaggi da seguire.</p>
</details>
</div>
<style>
.accordion details{border:1px solid #d8e1ec;border-radius:10px;margin:10px 0;background:#fff}
.accordion summary{cursor:pointer;font-weight:700;padding:15px}
.accordion details p{padding:0 15px 15px;margin:0}
</style>Da personalizzare: Cambia titoli, testi, colori, bordi e spaziatura. Puoi aggiungere tutti i blocchi details necessari.
Errore da evitare: Non nascondere informazioni indispensabili e non eliminare l'indicatore visivo senza sostituirlo con un'alternativa chiara.