विवरण र सारांश तत्वहरूले के प्रदान गर्छन्?

Question

Accepted Answer

`

` र `

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

Click to expand

This content is hidden until the user opens it.

``` - **`

`** क्लिकयोग्य लेबल हो (पहिलो बाल)। - यसपछि सबै कुरा संकुचनीय सामग्री हो। - सारांश क्लिक गर्दा खुला/बन्द टगल हुन्छ — नेटिभली कीबोर्ड-पहुँचयोग्य (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 accordions, "अधिक देखाउनुहोस्" खण्डहरू, संकुचनीय साइडबारहरू, spoiler पाठ, विस्तारयोग्य तालिका पङ्क्तिहरू। यो तत्व अघि, प्रत्येक accordion लाई JavaScript र पहुँचयोग्यताको लागि ARIA वायरिङ चाहिन्थ्यो — अब यो दुई semantic ट्यागहरू हो। ## किन यो महत्त्वपूर्ण छ `

`/`

` तपाइँलाई पहुँचयोग्य, कीबोर्ड-अनुकूल संकुचनीय सामग्री कुनै JS र कुनै म्यानुएल ARIA बिना दिन्छ — प्ल्याटफर्म प्रयोग गर्ने एक परिपूर्ण उदाहरण। कस्टम accordion बनाउनु अघि FAQs र "अधिक देखाउनुहोस्" ढाँचाहरूको लागि यसमा पहुँच गर्नुहोस्।