Apa sing dideleng dening unsur details lan summary?

Question

Accepted Answer

`

` lan `

` nggawe **widget disclosure asli** — bagean sing bisa dibukak/ditutup — kanthi **zero JavaScript**. Browser nangani toggle, dhukungan keyboard, lan aksesibilitas kanggo sampeyan. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** yaiku label sing bisa diklik (anak pisanan). - Kabeh sawise iku yaiku konten sing bisa ditutup. - Ngelik summary nganti ganti bukak/tutup kanthi asli — bisa diakses keyboard (Enter/Space) lan diumumake kanthi bener dening pembaca layar. ## Bukak kanthi standar & ndeteksi kahanan ```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 ``` ## Gaya pamarker ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Kasus panggunaan nyata Accordion FAQ, bagean "tampilake luwih akeh", sidebar sing bisa ditutup, teks spoiler, baris tabel sing bisa digebolake. Sadurunge unsur iki, saben accordion butuh JavaScript plus ARIA wiring kanggo aksesibilitas — saiki mung rong tag semantik. ## Mengapa Iku Penting `

`/`

` menehi sampeyan konten sing bisa ditutup sing bisa diakses lan ramah keyboard tanpa JS lan tanpa ARIA manual — contoh sempurna nggunakake platform. Jangkau kanggo FAQ lan pola "tampilake luwih akeh" sadurunge nggawe accordion khusus.