X'għannu jipprovidu l-elementi details u summary?

Question

Accepted Answer

`

` u `

` joħolqu **widġet ta' diskloża nativ** — sezzjoni espandibli/kolapsabbli — bil-**zero JavaScript**. Il-browser jittratta t-toggle, is-sapport tal-keyboard, u l-aċċessibilità għalik. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** hija t-tikketta li tista' tinklikkja (l-ewwel iben). - Dak kollu li ġej minnha huwa l-kontenut kolapsabbli. - Tikklikkja fuq is-summary taggħawweż miftuħ/magħluq - aċċessibli b'keyboard natif (Enter/Space) u annunzjat korrettament minn screen readers. ## Iftaħ bi default & detezzjoni tal-istatus ```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 ``` ## Istiling tal-marker ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Każi ta' użu reali Akkordjoni FAQ, sezzjonijiet "uri iktar", sidebars kolapsabbli, testi spoiler, ringieli ta' tabella espandabbli. Qabel dan l-element, kull akkordjon kien jeħtieġ JavaScript flimkien ma' wiring tal-ARIA għall-aċċessibilità — issa huma biss żewġ tags semantiċi. ## Għaliex Dan Importanti `

`/`

` jagħtuk kontenut kolapsabbli aċċessibli u keyboard-friendly mingħajr JS u mingħajr ARIA manwali — eżempju perfett ta' l-użu tal-platform. Oṣṣo għall-FAQs u patterns "uri iktar" qabel ma tibni akkordjon custom.