HTML Details और Summary
In this page:
<details>
<summary>Visible heading</summary>
Hidden content
</details>details के साथ नेटिव Accordions
details टैग आपके वेबपेज पर एक इंटरैक्टिव expand/collapse accordion विजेट परिभाषित करता है। इस कंटेनर के अंदर रखा गया कोई भी कंटेंट (जैसे paragraphs या images) डिफ़ॉल्ट रूप से तब तक छुपा रहता है जब तक यूज़र उसे खोलने के लिए क्लिक न करे।
- FAQs, तकनीकी विनिर्देशों (specifications), या नेस्टेड लिंक्स को व्यवस्थित और साफ रखने के लिए details टैग्स का उपयोग करें।
- Accepted attributes:
- open — boolean; expanded state
- name — group name; only one open in the group (exclusive accordion)
- summary — first child; visible label
उदाहरण: Native Accordions with details
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed here.</p>
</details>summary Heading को कस्टमाइज़ करना
summary टैग आपके details विजेट की दिखने वाली, क्लिक करने योग्य heading परिभाषित करता है। इस heading पर क्लिक करने से details का बाकी कंटेंट खुलता या बंद होता है, और यह डिफ़ॉल्ट रूप से बगल में एक छोटे disclosure triangle के साथ दिखता है।
उदाहरण: Customizing the summary Heading
<details>
<summary><h3>FAQ Question</h3></summary>
<p>Answer text</p>
</details>open के साथ पहले से Expanded Accordions
आप अपने details विजेट के ओपनिंग टैग में open एट्रिब्यूट जोड़कर उसे पेज लोड होते ही पहले से खुला हुआ दिखा सकते हैं। यह किसी मुख्य नोटिस या किसी लिस्ट के पहले सवाल को हाइलाइट करने के लिए बेहद उपयोगी है।
- अपने accordions को नियंत्रित करने के लिए आप अपनी स्क्रिप्ट्स के अंदर open एट्रिब्यूट को डायनामिक रूप से टॉगल कर सकते हैं।
- Accepted values:
- open — boolean attribute (present or open="")
- Toggle event fires when it changes
उदाहरण: Pre-expanded Accordions with open
<details open>
<summary>Already expanded</summary>
<p>Visible by default</p>
</details>Disclosure Triangle को कस्टमाइज़ करना
डिफ़ॉल्ट रूप से, ब्राउज़र आपके summary टेक्स्ट के बगल में एक छोटा disclosure triangle रेंडर करते हैं। आप स्टैंडर्ड CSS प्रॉपर्टीज़ का उपयोग करके इस triangle को आसानी से कस्टमाइज़ या हटा सकते हैं।
उदाहरण: Customizing the Disclosure Triangle
<style>
summary {
list-style: none;
}
</style>
<details>
<summary>Custom marker</summary>
<p>Content</p>
</details>कई Accordions को ग्रुप करना
आप साफ-सुथरे, प्रोफेशनल Accordion मेनू बनाने के लिए कई details विजेट्स को एक साथ ग्रुप कर सकते हैं। आप यहाँ तक कि सिंपल स्क्रिप्ट्स भी लिख सकते हैं जो जब यूज़र कोई नया विजेट खोले तब बाकी विजेट्स बंद कर दें, जिससे एक सच्चा Accordion मेनू फ्लो बनता है।
- कॉम्पैक्ट सेटिंग्स मेनू या साइडबार डायरेक्टरीज़ के लिए details ग्रुप्स का उपयोग करें।
- Accepted values:
- name — same string on several details makes them mutually exclusive
- open — boolean; preopened item
उदाहरण: Grouping Multiple Accordions
<details>
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details>
<summary>Question 2</summary>
<p>Answer 2</p>
</details>- details container के अंदर summary tag को दूसरे tags के नीचे रखना, जो accordion rendering को तोड़ देता है।
- details containers के अंदर fallback text छोड़ देना, जिससे expand होने पर खाली blocks दिखते हैं।
- details heights को fixed CSS values से style करने की कोशिश करना, जो आपके expanded content को काट सकता है।
- details tag एक interactive, collapsible accordion container define करता है।
- summary tag एक clickable header की तरह काम करता है जो content को open या closed toggle करता है।
- open attribute से accordion states manage करें, और CSS से default disclosure triangle customize या remove करें।
standard details और summary elements सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: