Menene abin da abubuwan details da summary ke ba da shi?

Question

Accepted Answer

`

` da `

` suna aiki da **wata abin haɓaka jiya na gida** — wani bangare da za a iya buɗe/rufewa — da **babu JavaScript**. Browser din ne ke kula da toggle, goyon bayan maɓalli, da accessibility gare ka. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** shine alamar da ake iya tuɓa (jarikin farko). - Duk abin da ke bayan shi shine abun da ake iya rufewar. - Tuɓar summary din ke canza buɗe/rufewa — sannu-sannu da maɓalli (Enter/Space) kuma akwai ƙarfi na karantawa. ## Buɗe a gida da gano yanayin ```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 ``` ## Wawa alamar ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Ainihin amfani FAQ accordions, "nuna ƙari" sassan, rufaffiyar bangarorin, rubutun spoiler, buɗaɗɗen layukan tebur. Kafin wannan abin, kowane accordion yana buƙatar JavaScript da ARIA wiring don accessibility — yanzu shi ne maɓalli biyu kawai. ## Menene mahimmancin sa `

`/`

` suna ba ka da buɗaɗɗen abun da ake iya tuɓa da kyau, da goyon bayan maɓalli, babu JS da babu ARIA da jiya — misal mafi kyau na yin amfani da platform. Jamia shi don FAQs da "nuna ƙari" shimfiɗoɗi kafin gina accordion na jiya.