<details> bikin bagian yang bisa dibuka-tutup sendiri, kayak daftar FAQ: pertanyaannya selalu kelihatan, jawabannya muncul waktu pertanyaannya diklik. Judul yang bisa diklik itu ditulis di <summary>. Semuanya jalan tanpa JavaScript.
🧪 Tebakan cepat: kalau
<summary>-nya lupa ditulis, judul apa yang muncul? Tebak dulu, jawabannya ada di bagian "Satu blok buka-tutup".
Satu blok buka-tutup
<details>
<summary>Apa itu CSS?</summary>
<p>CSS digunakan untuk mengatur tampilan elemen HTML.</p>
</details>
<details>membungkus seluruh blok, dari judul sampai isinya.<summary>adalah judul yang selalu kelihatan dan bisa diklik. Tulis sebagai isi pertama di dalam<details>.<p>adalah isinya. Semua yang ada di dalam<details>, selain<summary>, tersembunyi sampai judulnya diklik.</details>menutup bloknya.
Hasilnya, halaman cuma menampilkan "Apa itu CSS?" dengan segitiga kecil di depannya. Klik sekali, jawabannya muncul. Klik lagi, tertutup.
Kalau <summary> gak ditulis, browser tetap bikin judul sendiri dengan teks bawaan "Details". Jadi selalu tulis <summary> dengan teks yang jelas.
Terbuka dari awal dengan open
<details open>
<summary>Jam buka toko?</summary>
<p>Setiap hari, jam 08.00 sampai 21.00.</p>
</details>
open adalah atribut tanpa nilai: cukup tulis namanya di tag pembuka <details>. Blok ini sudah terbuka waktu halaman dimuat, dan pengunjung tetap bisa menutupnya. Waktu blok dibuka atau ditutup, browser sendiri yang menambah atau menghapus open.
open milik <details>, bukan <summary>. Ditulis di <summary>, dia gak ngefek apa-apa.
Beberapa blok jadi FAQ
Tiap pertanyaan punya <details> dan <summary>-nya sendiri. Tulis blok-bloknya berurutan:
<details open>
<summary>Pertanyaan pertama</summary>
<p>Jawaban pertama.</p>
</details>
<details>
<summary>Pertanyaan kedua</summary>
<p>Jawaban kedua.</p>
</details>
Cuma blok pertama yang terbuka dari awal, karena cuma dia yang punya open.
Mau cuma satu jawaban yang terbuka dalam satu waktu? Kasih semua <details> atribut name yang sama, misalnya name="faq". Buka satu, yang lain otomatis tertutup.
⚠️ Jebakan yang sering ketemu
<summary>di luar<details>. Judulnya jadi teks biasa dan gak bisa diklik.- Satu
<details>buat semua pertanyaan. Semua jawabannya ikut buka-tutup bareng. Tiap pertanyaan butuh blok sendiri. - Jawaban ditulis sesudah
</details>. Jawabannya selalu tampil, gak ikut tersembunyi. Tulis jawabannya sebelum</details>.
TL;DR: <details> membungkus blok buka-tutup, <summary> jadi judul yang bisa diklik, sisanya isi yang tersembunyi. Tanpa <summary>, browser menulis "Details". Tambah open di <details> biar terbuka dari awal. FAQ adalah beberapa <details> berurutan, satu per pertanyaan, dan name yang sama bikin cuma satu yang terbuka.
