Mit biztosítanak a `
` és `
` elemek?

Question

Mit biztosítanak a `

` és `

` elemek?

Accepted Answer

`

` és `

` egy **natív nyitható/bezárható widgetet** hoznak létre — egy bővíthető/összecsukható szakaszt — **nulla JavaScript nélkül**. A böngésző kezeli a váltógombot, a billentyűzet támogatást és az akadálymentesítést helyetted. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** a kattintható címke (az első gyermek). - Utána minden a összecsukható tartalom. - A summary-ra kattintás natívan nyitva/zárva kapcsolja az elemet — billentyűzettel elérhető (Enter/Szóköz) és a képernyőolvasók helyesen bejelentik. ## Alapértelmezett nyitott állapot & állapot érzékelése ```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 ``` ## A marker stílusa ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Valós felhasználási esetek GYIK akkordeonok, "mutass többet" szakaszok, összecsukható oldalsávok, spoiler szöveg, bővíthető táblázat sorok. Ez az elem előtt minden akkordeonnak JavaScript-re és ARIA vezetésre volt szüksége az akadálymentesítéshez — most csak két szemantikus tag. ## Miért számít A `

`/`

` hozzáférhető, billentyűzetbarát összecsukható tartalmat biztosít JS és manuális ARIA nélkül — tökéletes példa a platform használatára. Üzd fel a GYIK és "mutass többet" mintákhoz, mielőtt egyéni akkordeon építésére vágódnál.