Guida HTML interattiva: Details e summary

Q: Come faccio a far partire aperto un elemento details?

Aggiungi l'attributo booleano open: . Il browser aggiunge e toglie quell'attributo quando l'utente apre e chiude, quindi il CSS può dare stile a details[open].

Q: Come creo una fisarmonica in cui è aperta una sola sezione?

Dai a ogni del gruppo lo stesso attributo name, per esempio name="faq". Aprirne uno chiude gli altri di quel gruppo, senza JavaScript.

Q: Come tolgo o cambio la freccia di un details summary?

Imposta list-style: none su summary e aggiungi summary::-webkit-details-marker { display: none; } per Safari. Poi disegna il tuo indicatore, per esempio con summary::after, e cambialo con details[open] summary::after.

Q: Posso sapere quando si apre un elemento details?

Sì. Ascolta l'evento toggle sull'elemento e leggi la sua proprietà open. Impostare details.open = true in JavaScript lo apre.

Contenuto espandibile con details e summary

Racchiudi il contenuto in <details> e metti per primo un <summary>. Il summary resta visibile; tutto il resto è nascosto finché chi legge non lo clicca:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Clicca la domanda per aprirla, e di nuovo per chiuderla. Il browser aggiunge il triangolino, rende il summary raggiungibile con il focus, lo apre e chiude con Invio o la barra spaziatrice e dice ai lettori di schermo se è espanso o compresso. Non c'è JavaScript di mezzo.

Se lasci fuori <summary>, il browser mostra al suo posto un'etichetta predefinita ("Dettagli" in italiano).

Aperto di default

L'attributo booleano open mostra il contenuto fin dall'inizio. Il browser aggiunge e toglie open mentre chi legge apre e chiude, quindi è anche l'aggancio per lo stile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

Il riquadro aperto ha un bordo blu grazie a details[open]. Apri "Returns" e diventa blu anche lui; possono essere aperti entrambi nello stesso momento.

Fisarmonica: una sola sezione aperta alla volta

Dai a più elementi <details> lo stesso name e diventano un gruppo esclusivo: aprirne uno chiude gli altri. Prima serviva JavaScript, ora funziona con il solo attributo nelle versioni attuali di Chrome, Edge, Firefox e Safari:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

Apri la seconda domanda e la prima si chiude. Togli gli attributi name e tornano ad aprirsi in modo indipendente. Una fisarmonica esclusiva nasconde contenuti che chi legge potrebbe voler confrontare, quindi usala quando le sezioni sono alternative, e dei semplici <details> quando le persone possono volerne aprire diversi.

Dare stile all'indicatore

Il triangolino è un indicatore di lista sul summary. list-style: none lo toglie (la regola ::-webkit-details-marker copre Safari), e uno pseudo-elemento può disegnare il tuo indicatore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

Il segno più ruota di 45 gradi e diventa una croce quando la sezione si apre. Mantieni uno stile di focus visibile come il contorno :focus-visible di questo esempio: una volta tolto l'indicatore predefinito, è sul contorno di focus che fa affidamento chi usa la tastiera.

L'evento toggle e la proprietà open

JavaScript può leggere e impostare details.open, e l'evento toggle scatta dopo ogni cambiamento, che l'abbia causato un clic, un tasto o uno script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

"Expand all" imposta open su entrambi, e il log mostra l'ultimo evento toggle. L'evento non risale ai genitori, quindi ascoltalo su ogni elemento <details> e non su un contenitore.

Cosa mettere in un summary

Un summary contiene testo, elementi inline o un titolo quando il titolo della sezione fa parte della struttura della pagina:

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

Evita link, pulsanti e campi di form dentro <summary>: il summary è già un controllo, quindi un controllo al suo interno è facile da non notare o da premere per sbaglio, e i lettori di schermo annunciano male i controlli annidati. Metti i contenuti interattivi nel corpo del <details>.

Errori comuni

Creare un interruttore con un <div> e JavaScript. <details> gestisce già clic, tasti e stato per i lettori di schermo. Quando ti serve davvero un interruttore personalizzato, usa un pulsante con aria-expanded.
Mettere <summary> in una posizione diversa dalla prima. Deve essere il primo figlio di <details>.
Nascondere l'indicatore senza sostituirlo. Dai a chi legge un segnale che il summary si apre, come il segno più qui sopra.
Usare display per nascondere il contenuto. Cambia invece open; un CSS che forza il contenuto visibile o nascosto va contro lo stato del browser.
Gruppi esclusivi per contenuti da confrontare. Usa name solo quando ha senso una sola sezione aperta alla volta.

Domande frequenti

Cosa fanno details e summary in HTML?

<details> crea un widget a comparsa: una sezione che si può aprire e chiudere. Il suo primo figlio, <summary>, è l'etichetta sempre visibile; cliccandolo (o premendo Invio o la barra spaziatrice quando ha il focus) si mostra o si nasconde tutto il resto dentro <details>.

Come faccio a far partire aperto un elemento details?

Aggiungi l'attributo booleano open: <details open>. Il browser aggiunge e toglie quell'attributo quando l'utente apre e chiude, quindi il CSS può dare stile a details[open].

Come creo una fisarmonica in cui è aperta una sola sezione?

Dai a ogni <details> del gruppo lo stesso attributo name, per esempio name="faq". Aprirne uno chiude gli altri di quel gruppo, senza JavaScript.

Come tolgo o cambio la freccia di un details summary?

Imposta list-style: none su summary e aggiungi summary::-webkit-details-marker { display: none; } per Safari. Poi disegna il tuo indicatore, per esempio con summary::after, e cambialo con details[open] summary::after.

Posso sapere quando si apre un elemento details?

Sì. Ascolta l'evento toggle sull'elemento <details> e leggi la sua proprietà open. Impostare details.open = true in JavaScript lo apre.

Concetti correlati