تفصیلات اور خلاصہ کے عناصر کیا فراہم کرتے ہیں؟

Question

Accepted Answer

`

` اور `

` ایک **مقامی disclosure widget** بناتے ہیں — قابل توسیع/قابل تقلیل حصہ — **بغیر کسی JavaScript** کے۔ براؤزر toggle، keyboard support، اور رسائی آپ کے لیے سنبھالتا ہے۔ ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** قابل کلک label ہے (پہلا child)۔ - اس کے بعد سب کچھ قابل تقلیل content ہے۔ - summary پر کلک کرنے سے open/closed toggle ہوتا ہے — مقامی طور پر keyboard-accessible (Enter/Space) اور screen readers کے ذریعے صحیح طریقے سے اعلان کیا جاتا ہے۔ ## ڈیفالٹ کے لحاظ سے کھول دیں اور حالت کی شناخت کریں ```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 ``` ## Marker کو Style کریں ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## حقیقی استعمال کی صورتیں FAQ accordions، "مزید دکھائیں" حصے، قابل تقلیل sidebars، spoiler text، قابل توسیع table rows۔ اس عنصر سے پہلے، ہر accordion کو accessibility کے لیے JavaScript اور ARIA wiring کی ضرورت تھی — اب یہ صرف دو semantic tags ہیں۔ ## اہمیت `

`/`

` آپ کو قابل رسائی، keyboard-friendly قابل تقلیل content بغیر JS اور بغیر manual ARIA کے دیتے ہیں — platform استعمال کرنے کی ایک بہترین مثال۔ ایک custom accordion بنانے سے پہلے FAQs اور "مزید دکھائیں" patterns کے لیے اس تک پہنچیں۔