Nini details na summary elements zinazotoa?

Question

Accepted Answer

`

` na `

` huunda **disclosure widget ya asili** — sehemu inayoweza kupanua/kukatazo — **bila JavaScript**. Kivinjari kinashughulikia kibadili, msaada wa kibodi na ufikivu kwako. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** ni lebo inayoweza kubofya (mtoto wa kwanza). - Kila kitu baada yake ni muwonekano unaokatazo. - Kubofya summary hubadilisha hali ya wazi/imefungwa — kwa asili inaweza kufikia kwa kibodi (Enter/Space) na inaelezwa sahihi na wasomaji wa skrini. ## Fungua kwa Default & Kugundua Hali ```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 ``` ## Kubadilisha Alama ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Matumizi halisi Akordioni za FAQ, sehemu za "ongeeza zaidi", pau ya upande inayokatazo, maandishi ya spoiler, safu za jedwali zinazoweza kupanua. Hapo awali, kila akordioni ilihitaji JavaScript pamoja na wiring wa ARIA kwa ufikivu — sasa ni lebo mbili tu za semantic. ## Kwa nini Inakamatia `

`/`

` hukupa muwonekano unaokatazo unaofikiwa, unaosaidia kibodi bila JS na bila ARIA ya mwanzo — mfano kamili wa kutumia jukwaa. Ikilie kwa FAQ na "ongeeza zaidi" patterns kabla ya kujenga akordioni ya kawaida.