<details>: l'elemento di divulgazione dei "Dettagli"

L' elemento HTML <details> crea un widget di divulgazione in cui le informazioni sono visibili solo quando il widget passa allo stato "aperto". È necessario fornire un riepilogo o un'etichetta utilizzando l' elemento <summary>.

Un widget di divulgazione viene generalmente presentato sullo schermo utilizzando un piccolo triangolo che ruota (o ruota) per indicare lo stato aperto/chiuso, con un'etichetta accanto al triangolo. Il contenuto dell'elemento <summary> viene utilizzato come etichetta per il widget di divulgazione.

Un widget <details> può trovarsi in uno di due stati. Lo stato chiuso predefinito visualizza solo il triangolo e l'etichetta all'interno di <summary> (o una stringa predefinita definita dal programma utente se non è presente <summary> ).

Quando l'utente fa clic sul widget o lo mette a fuoco, quindi preme la barra spaziatrice, si "torce" aprendo, rivelando il suo contenuto. L'uso comune di un triangolo che ruota o si attorciglia per rappresentare l'apertura o la chiusura del widget è il motivo per cui questi sono talvolta chiamati "twisties".

Puoi utilizzare CSS per definire lo stile del widget di divulgazione e puoi aprire e chiudere a livello di codice il widget impostando/rimuovendo il suo attributo open. Sfortunatamente, in questo momento non esiste un modo integrato per animare la transizione tra aperto e chiuso.

Per impostazione predefinita, quando è chiuso, il widget è alto solo sufficientemente per visualizzare il triangolo di apertura e il riepilogo. Quando è aperto, si espande per visualizzare i dettagli contenuti all'interno.

Le implementazioni completamente conformi agli standard applicano automaticamente il CSS display: list-item all'elemento <summary>. Puoi usarlo per personalizzarne ulteriormente l'aspetto.

Attributi

Gli attributi di questo elemento includono gli attributi globali.

open

Questo attributo booleano indica se i dettagli, ovvero il contenuto dell'elemento <details>, sono attualmente visibili o meno. I dettagli vengono mostrati quando questo attributo esiste o nascosti quando questo attributo è assente. Per impostazione predefinita, questo attributo è assente, il che significa che i dettagli non sono visibili.

Nota: devi rimuovere completamente questo attributo per nascondere i dettagli. open="false" rende visibili i dettagli perché questo attributo è booleano.

Eventi

Oltre ai consueti eventi supportati dagli elementi HTML, l'elemento <details> supporta l'evento toggle, che viene inviato all'elemento <details> ogni volta che il suo stato cambia tra aperto e chiuso. Viene inviato dopo la modifica dello stato, sebbene se lo stato cambia più volte prima che il browser possa inviare l'evento, gli eventi vengono uniti in modo che ne venga inviato solo uno.

Puoi utilizzare un listener di eventi per l'evento toggle per rilevare quando il widget cambia stato:

details.addEventListener("toggle", event => {
  if(details.open) {
    /*l'elemento è stato aperto*/
  } else {
    /*l'elemento è stato chiuso*/
  }
});

Esempi

Un semplice esempio di details

Questo esempio mostra un semplice elemento <details> con un <summary>.

<details>
  <summary>Requisiti di sistema </summary>
  <p>Richiede un computer che esegue un sistema operativo. Il computer 
  deve avere un po' di memoria e idealmente una sorta di archiviazione a lungo termine. 
  Si consiglia un dispositivo di input e una qualche forma di dispositivo di output.</p>
</details>

Creazione di un elemento <details> aperto

Per avviare la casella <details> nel suo stato aperto, aggiungi l'attributo booleano open:

<details open>
  <summary>Requisiti di sistema </summary>
  <p>Richiede un computer che esegue un sistema operativo. Il computer 
  deve avere un po' di memoria e idealmente una sorta di archiviazione a lungo termine. 
  Si consiglia un dispositivo di input e una qualche forma di dispositivo di output.</p>
</details>

Personalizzazione dell'aspetto

Ora applichiamo alcuni CSS per personalizzare l'aspetto della finestra di divulgazione.

CSS

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;  
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  boxshadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

Questo CSS crea un aspetto simile a un'interfaccia a schede, in cui facendo clic sulla scheda la si apre per rivelarne il contenuto.

Il selettore details[open] può essere utilizzato per definire lo stile dell'elemento aperto.

HTML

<details>
  <summary>Requisiti di sistema </summary>
  <p>Richiede un computer che esegue un sistema operativo. Il computer 
  deve avere un po' di memoria e idealmente una sorta di archiviazione a lungo termine. 
  Si consiglia un dispositivo di input e una qualche forma di dispositivo di output.</p>
</details>

Personalizzazione del widget

Il triangolo di apertura stesso può essere personalizzato, sebbene ciò non sia ampiamente supportato. Esistono variazioni nel modo in cui i browser supportano questa personalizzazione a causa di implementazioni sperimentali poiché l'elemento è stato standardizzato, quindi dovremo utilizzare più approcci per un po'.

L'elemento <summary> supporta la proprietà shorthand list-style e le sue proprietà longhand, come list-style-type, per cambiare il triangolo di apertura in qualsiasi cosa tu scelga (di solito con list-style-image ). Ad esempio, possiamo rimuovere l'icona del widget di divulgazione impostando list-style: none.

CSS

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}
                              
details > summary {
  padding: 2px 6px;  
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}
                              
details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  boxshadow: 3px 3px 4px black;
}

Questo CSS crea un aspetto simile a un'interfaccia a schede, in cui l'attivazione della scheda si espande e la apre per rivelarne il contenuto.

<details>
  <summary>Requisiti di sistema </summary>
  <p>Richiede un computer che esegue un sistema operativo. Il computer 
  deve avere un po' di memoria e idealmente una sorta di archiviazione a lungo termine. 
  Si consiglia un dispositivo di input e una qualche forma di dispositivo di output.</p>
</details>