Details-elementti

details-elementti luo HTML-spoilerin, eli sitä käytetään informaatioon, jonka käyttäjä voi halutessaan piilottaa tai näyttää.

Oletusarvoisesti elementin sisältö on piilotettu. Käyttäjän pyynnöstä sen näyttämiseksi tulee lisätä summary-elementti, joka määrittää otsikon details-elementille. Tämä otsikko on aina näkyvillä sivulla (vaikka details-elementin sisältö olisi tiivistetyssä tilassa) ja sitä voi klikata piilotetun tekstin laajentamiseksi tai tiivistämiseksi.

Piilotetun sisällön näyttämiseen voidaan myös käyttää details-elementin open-attribuuttia (esimerkiksi details-elementin sisällön näyttämiseksi JavaScriptin avulla).

Esimerkki

Katsotaan kuinka details-elementti toimii:

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

Результат:

Katso myös