Cad a sholáthraíonn na heilimintí details agus summary?

Question

Accepted Answer

`

` agus `

` a chruthaíonn **giuirléid nochtana dhúchais** — alt leathnaíoch/inchlaonta — le **zéro JavaScript**. An brabhsálaí a bhainistithe an toggle, tacaíocht ar an méarchlár, agus inrochtaineacht ar do shonraigí. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** an lipéad inchlicloinnte (an chéad leanbh). - Gach rud ina dhiaidh sin an t-ábhar inchlaonta. - Cliceáil an achoimre a bhogann oscailte/dhúnta — inrochtain dhúchais ar an méarchlár (Enter/Space) agus fógraí i gceart ag léitheoir scáileáin. ## Oscailte de bharr réamhshocrú & staid a bhrath ```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 ``` ## An marcóir a stíleáil ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Fíorúsáidí FAQ accordions, rannáin "taispeáin níos mó", barraigí inchlaonta, téacs spoiler, ránna tábla leathnaíocha. Roimh an eilimint seo, bhí gach accordion ag teastáil ó JavaScript agus línithe ARIA maidir le hinchumhachta — anois tá sé dhá thag séimeanteach ann. ## An fáth go bhfuil sé tábhachtach `

`/`

` a thugann duit ábhar inchlaonta athuair-inrochtana, barrógtha ar an méarchlár gan JS agus gan ARIA láimhe — sampla foirfe de úsáid a bhaint as an ardán. Baineann leis sé ar FAQs agus patrúin "taispeáin níos mó" roimh accordion saincheaptha a thógáil.