<summary>: l'elemento "Riepilogo divulgazione"

L'elemento HTML <summary> specifica un riepilogo, una didascalia o una legenda per la finestra di divulgazione di un elemento <details>. Facendo clic sull'elemento <summary> si alterna lo stato dell'elemento <details> padre aperto e chiuso.

Note d'uso

Il contenuto dell'elemento <summary> può essere qualsiasi contenuto di intestazione, testo normale o HTML che può essere utilizzato all'interno di un paragrafo.

Un elemento <summary> può essere utilizzato solo come primo figlio di un elemento <summary>. Quando l'utente fa clic sul riepilogo, l'elemento <details> padre viene aperto o chiuso, quindi viene inviato un evento toggle all'elemento <details>, che può essere utilizzato per informarti quando si verifica questo cambiamento di stato.

Testo etichette predefinito

Se il primo figlio di un elemento <details> non è un elemento <summary>, l'interprete utilizzerà una stringa predefinita (tipicamente "Dettagli") come etichetta per la finestra di divulgazione.

Stile predefinito

Secondo la specifica HTML, lo stile predefinito per gli elementi <summary> include display: list-item. Ciò consente di modificare o rimuovere l'icona visualizzata come widget di divulgazione accanto all'etichetta dall'impostazione predefinita, che in genere è un triangolo.

Puoi anche cambiare lo stile in display: block per rimuovere il triangolo di apertura.

Per i browser basati su Webkit, come Safari, è possibile controllare la visualizzazione delle icone tramite lo pseudo-elemento CSS non standard ::-webkit-details-marker. Per rimuovere il triangolo di apertura, utilizzare summary::-webkit-details-marker { display: none }.

Esempi

Di seguito sono riportati alcuni esempi di utilizzo dell'elemento <summary>. Puoi trovare altri esempi nella documentazione dell'elemento <details>.

Esempio di base

Un semplice esempio che mostra l'uso di <summary> in un elemento <details>:

<details open>
  <summary>Panoramica</summary>
  <ol>
    <li>Contanti in cassa: $ 500,00</li>
    <li>Fattura attuale: $ 75,00</li>
    <li>Data di scadenza: 06/06/2022</li>  
  </ol>
</details>