विवरण आणि सारांश घटक काय प्रदान करतात?

Question

Accepted Answer

`

` आणि `

` एक **नेटिव डिस्क्लोजर विजेट** तयार करतात — विस्तार योग्य/संकुचित विभाग — **शून्य JavaScript** के साथ। ब्राउজर आपके लिए टॉगल, कीबोर्ड समर्थन, आणि पहुंच संभाल लेता है। ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** क्लिक करने योग्य लेबल है (पहली संतान)। - इसके बाद सब कुछ संकुचित सामग्री है। - summary पर क्लिक करने से नेटिवली खुला/बंद होता है — कीबोर्ड-सुलभ (Enter/Space) और स्क्रीन रीडर द्वारा सही ढंग से घोषित। ## डिफ़ॉल्ट द्वारा खुला & स्थिति का पता लगाना ```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 ``` ## मार्कर को स्टाइल करना ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## वास्तविक उपयोग के मामले FAQ अकॉर्डियन, "और दिखाएं" विभाग, संकुचित साइडबार, स्पॉइलर टेक्स्ट, विस्तार योग्य टेबल पंक्तियां। इस तत्व से पहले, हर अकॉर्डियन को पहुंच के लिए JavaScript और ARIA वायरिंग की आवश्यकता थी — अब यह सिर्फ दो शब्दार्थ टैग हैं। ## यह महत्वपूर्ण क्यों है `

`/`

` आपको JS और मैनुअल ARIA के बिना सुलभ, कीबोर्ड-अनुकूल संकुचित सामग्री देते हैं — प्लेटफॉर्म का उपयोग करने का एक बेहतरीन उदाहरण। कस्टम अकॉर्डियन बनाने से पहले FAQ और "और दिखाएं" पैटर्न के लिए इसका उपयोग करें।