Il tag details

Il tag details crea uno spoiler in HTML, ovvero viene utilizzato per informazioni che possono essere nascoste o mostrate a piacimento dell'utente.

Per impostazione predefinita, il contenuto del tag è nascosto. Per mostrarlo su richiesta dell'utente, è necessario aggiungere il tag summary, che specifica un titolo per il tag details. Questo titolo è sempre visibile sulla pagina (anche se il contenuto di details è in stato compresso) e su di esso si può cliccare per espandere il testo nascosto o per comprimerlo.

Per mostrare il contenuto nascosto si può anche utilizzare l'attributo open del tag details (ad esempio, per mostrare il contenuto di details tramite JavaScript).

Esempio

Vediamo come funziona il tag details:

html<details>
  <summary>click me</summary>
  hidden text
</details>

Результат:

Vedi anche