Belajar Element HTML: <details>

Tag <details> mewakili detail tambahan yang dapat dilihat atau disembunyikan pengguna saat diminta.

Tag ini digunakan dengan tag <summary> untuk memberikan toggle yang dapat diklik untuk memperluas atau menciutkan detail saat diperlukan.

Jika tidak ada summary, browser harus menampilkan ringkasan sendiri

Syntax

Tag <details> ditulis seperti <details></details> dengan tag <summary> diselipkan diantara tag pembuka dan penutup.

<details>
  <summary>Klik untuk membuka</summary>
  <p>Konten detail disini...</p>
</details>
<details>
<summary>Click to Expand</summary>
<p>If your browser supports this element, it should allow you to expand and collapse these details.</p>
</details>

open

Menentukan apakah detail tambahan ditampilkan secara default atau tidak

"true"

Detail tambahan akan terlihat secara default.

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <details> dengan pengaturan CSS:

details {
  display: block;
}