Vis og skjul elementer med HTML5

Ofte benyttes JavaScript for å vise og skjule elementer. I HTML5 kan elementene <details> og <summary> kan benyttes for å skjule og vise elementer på en webside. Da slipper man unødig bruk av JavaScript!

<details>
<summary>Informasjon</summary>
<p>Hvis nettleseren din støtter dette elementet
kan du skjule og vise dette avsnittet.</p>
</details>

Ønsker du for eksempel at et element skal vises som standard, kan du legge til attributtet open i details-elementet.

<!– Denne er åpen som standard –>
<details open=’open’>
<summary>Informasjon</summary>
<p>Hvis nettleseren din støtter dette elementet kan du skjule og vise dette avsnittet.</p>
</details>

<!– Denne er lukket som standard –>
<details>
<summary>Mer informasjon</summary>
<p>Dette avsnittet er lukket som standard.</p>
</details>