<details> और <summary> एक नेटिव disclosure widget बनाते हैं — एक विस्तार/संकुचन योग्य (expandable/collapsible) सेक्शन — वह भी ज़ीरो JavaScript के साथ। ब्राउज़र आपके लिए टॉगल, कीबोर्ड सपोर्ट और एक्सेसिबिलिटी संभालता है।
Click to expand
This content is hidden until the user opens it.
<summary> क्लिक करने योग्य लेबल है (पहला चाइल्ड)।<details open> <!-- starts expanded -->
<summary>FAQ item</summary>
<p>Answer...</p>
</details>
const d = document.querySelector("details");
d.open; // boolean: is it open?
d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close
summary { cursor: pointer; }
summary::marker { color: blue; } /* the triangle/arrow */
details[open] summary { font-weight: bold; } /* style when open */
FAQ accordions, "show more" सेक्शन, collapsible sidebars, spoiler text, expandable table rows। इस एलिमेंट से पहले, हर accordion को एक्सेसिबिलिटी के लिए JavaScript के साथ-साथ ARIA वायरिंग की ज़रूरत होती थी — अब यह केवल दो semantic टैग हैं।
<details>/<summary> आपको बिना किसी JS और बिना मैन्युअल ARIA के एक्सेसिबल, कीबोर्ड-फ्रेंडली collapsible कंटेंट देते हैं — प्लेटफ़ॉर्म का उपयोग करने का एक बेहतरीन उदाहरण।
कस्टम accordion बनाने से पहले FAQs और "show more" पैटर्न के लिए इसका उपयोग करें।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें