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:
<details>
<summary>click me</summary>
hidden text
</details>
:
Katso myös
-
hidden-attribuutti,
joka piilottaa elementtejä sivulla
