Çfarë sigurojnë elementet details dhe summary?

Question

Accepted Answer

`

` dhe `

` krijojnë një **widget zbulese nativ** — një seksion të zgjerueshëm/tkurrueshëm — **pa JavaScript**. Shfletuesi menaxhon çelësat, mbështetjen e tastierës dhe aksesibilitetin për ju. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** është etiketa e kllikueshme (fëmija i parë). - Gjithçka pas saj është përmbajtja e tkurrur. - Klikimi në summary bën të ndërrohet gjendja hapëse/mbyllëse — natively accessible me tastierë (Enter/Space) dhe i njoftuar saktë nga lexuesit e ekranit. ## Hapur si parazgjedhje & zbulimi i gjendjes ```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 ``` ## Stilizimi i shënuesit ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Raste reale përdorimi Akordione FAQ, seksione "shfaq më shumë", shirita anësor tkurrshëm, tekst spoiler, rreshta tabele të zgjerueshëm. Më parë, çdo akordion kërkonte JavaScript plus rradhimet ARIA për aksesibilitet — tani janë vetëm dy etiketat semantike. ## Pse është e rëndësishme `

`/`

` ju japin përmbajtje kolapsibël të aksesshme, miqësore ndaj tastierës pa JS dhe pa ARIA manuale — një shembull i përsosur i përdorimit të platformës. Zbatojeni për FAQ dhe modele "shfaq më shumë" përpara se të ndërtoni një akordion të personalizuar.