Apa yang disediakan oleh elemen details dan summary?

Question

Accepted Answer

`

` dan `

` membuat **widget disclosure asli** — sebuah bagian yang dapat diperluas/diciutkan — dengan **tanpa JavaScript sama sekali**. Browser menangani toggle, dukungan keyboard, dan aksesibilitas untuk Anda. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** adalah label yang dapat diklik (anak pertama). - Semua yang setelahnya adalah konten yang dapat diciutkan. - Mengklik summary mengubah status terbuka/tertutup — dapat diakses secara native melalui keyboard (Enter/Space) dan diumumkan dengan benar oleh screen reader. ## Terbuka secara default & mendeteksi status ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Menata gaya marker ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Kasus penggunaan nyata Akordion FAQ, bagian "tampilkan selengkapnya", sidebar yang dapat diciutkan, teks spoiler, baris tabel yang dapat diperluas. Sebelum elemen ini, setiap akordion memerlukan JavaScript plus wiring ARIA untuk aksesibilitas — sekarang hanya dua tag semantik. ## Mengapa ini penting `

`/`

` memberikan Anda konten yang dapat diciutkan dengan aksesibel dan ramah keyboard tanpa JS dan tanpa ARIA manual — contoh sempurna menggunakan platform. Gunakan untuk FAQ dan pola "tampilkan selengkapnya" sebelum membangun akordion khusus.