ज़्यादा जानकारी और खास जानकारी

जानें कि बहुत काम की जानकारी और समरी एलिमेंट कैसे काम करते हैं और ये काम कैसे किए जाते हैं उनका इस्तेमाल कैसे हो सकता है.

जानकारी देने वाला विजेट, यूज़र इंटरफ़ेस का कंट्रोल होता है. यह कॉन्टेंट को छिपाता और दिखाता है. अगर आप इसे web.dev पर पढ़ रहे हैं, और आपके व्यूपोर्ट की चौड़ाई 106 ems से कम है, इसलिए "इस पेज पर" पर क्लिक करना ऊपर दिए गए पैराग्राफ़ में, इस सेक्शन में बताया गया है. अगर आपको यह नहीं दिखता है, तो ब्राउज़र को इस पेज पर विषय सूची नेविगेशन के तौर पर देखने के लिए, जानकारी वाला विजेट.

अकॉर्डियन ग्राफ़िकल यूज़र इंटरफ़ेस, वर्टिकल तौर पर स्टैक की गई एक सीरीज़ होती है जानकारी देने वाले विजेट. Accordion के यूज़र इंटरफ़ेस (यूआई) का आम तौर पर इस्तेमाल, कई साइटों पर अक्सर पूछे जाने वाले सवालों के पेज पर किया जाता है. अकॉर्डियन के अक्सर पूछे जाने वाले सवाल में, दिखने वाले सवालों की सूची होती है; क्लिक करने से उस सवाल का जवाब बड़ा हो जाता है या "ज़ाहिर हो जाता है".

jQuery ने कम से कम 2009 से एकॉर्डियन यूज़र इंटरफ़ेस (यूआई) पैटर्न शामिल किया है. मूल JavaScript-मुक्त अकॉर्डियन समाधान में, अक्सर पूछे जाने वाले हर सवाल को <label> के बाद सही का निशान लगाकर लेबल किया गया. इसके बाद, <div> दिखाया गया सही का निशान लगाए जाने पर जवाब दें. सीएसएस कुछ इस तरह दिखती थी:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

इतिहास ही क्यों? बिना JavaScript या फ़ॉर्म कंट्रोल के हैक जैसे डिसक्लोज़र विजेट, हाल ही के हैं जोड़; <details> और <summary> एलिमेंट, जनवरी 2020 से सभी मॉडर्न ब्राउज़र पर पूरी तरह से काम करते हैं. अब आपके पास फ़ंक्शन बनाने की सुविधा है, लेकिन यह कम है जो सिर्फ़ सिमैंटिक एचटीएमएल का इस्तेमाल करते हुए आकर्षक जानकारी देने वाले विजेट हों. आपको सिर्फ़ <details> और <summary> एलिमेंट की ज़रूरत होती है: ये पहले से मौजूद होते हैं, ताकि इन्हें हैंडल किया जा सके कॉन्टेंट को बड़ा और छोटा करने के बारे में ज़्यादा. जब कोई उपयोगकर्ता <summary> पर क्लिक या टैप करता है या Enter बटन को तब छोड़ता है, जब <summary> पर फ़ोकस है, पैरंट <details> के कॉन्टेंट को टॉगल करके दिखाया जा सकता है!

सभी सिमैंटिक कॉन्टेंट की तरह, डिफ़ॉल्ट सुविधाओं और लुक को बेहतर बनाया जा सकता है. इस मामले में, थोड़ी-बहुत सीएसएस को जोड़ा गया है, लेकिन इसके अलावा और कुछ नहीं है:

यह ध्यान रखें कि इन कोडपेन में कोई JavaScript नहीं होती.

विज़िबिलिटी को टॉगल किया जा रहा है: open एट्रिब्यूट

<details> एलिमेंट, जानकारी देने वाला विजेट कंटेनर है. <summary>, अपने पैरंट <details> का जवाब या लेजेंड है. कॉन्टेंट बनाने सारांश हमेशा दिखाया जाता है और एक बटन के रूप में काम करता है. इससे अभिभावक के बाकी कॉन्टेंट को दिखाने की सुविधा चालू हो जाती है. इंटरैक्ट कर रहा है यह <summary> को टॉगल करके अपने-आप लेबल होने वाली समरी सिबलिंग को दिखाता है. इसके लिए, <details>' एलिमेंट का open एट्रिब्यूट.

open एट्रिब्यूट एक बूलियन एट्रिब्यूट है. अगर यह मौजूद है, तो चाहे उसकी वैल्यू कुछ भी हो या कम, यह बताता है कि सभी <details> कॉन्टेंट उपयोगकर्ता को दिखाया जाता है. अगर open एट्रिब्यूट मौजूद नहीं है, तो सिर्फ़ <summary> का कॉन्टेंट दिखाया जाता है.

उपयोगकर्ता के कंट्रोल से इंटरैक्ट करने पर, open एट्रिब्यूट अपने-आप जुड़ और हट जाता है. इसलिए, इसका इस्तेमाल इन कामों के लिए किया जा सकता है: एलिमेंट की स्थिति के आधार पर उसे अलग-अलग स्टाइल में ढाल सकता है.

कई <details> एलिमेंट की सूची का इस्तेमाल करके, एक अकॉर्डियन बनाया जा सकता है. हर एलिमेंट में एक <summary> चाइल्ड एलिमेंट होना चाहिए. open एट्रिब्यूट को छोड़ना आपके एचटीएमएल में इसका मतलब है कि <details> को छोटा कर दिया जाएगा या बंद कर दिया जाएगा. पेज लोड होने पर, सिर्फ़ खास जानकारी वाले शीर्षक दिखेंगे; हर हेडिंग, पैरंट <details> में मौजूद बाकी कॉन्टेंट के लिए ओपनर है. अगर आप अपने एचटीएमएल में open एट्रिब्यूट शामिल करते हैं, तो <details> पेज लोड होने पर, कॉन्टेंट को बड़ा करके दिखाया जाएगा.

इस विकल्प को चुनने पर, छिपा हुआ कॉन्टेंट कुछ ब्राउज़र में खोजा जा सकता है, लेकिन कुछ ब्राउज़र में नहीं. भले ही, कॉन्टेंट छोटा हो गया हो DOM का हिस्सा नहीं है. Edge या Chrome में खोजने पर, खोज के लिए इस्तेमाल हुए शब्द वाली जानकारी बड़ी हो जाएगी उन्हें कम या ज़्यादा करें. यह व्यवहार Firefox या Safari में दोहराया नहीं जाता है.

<summary>, <details> एलिमेंट का पहला चाइल्ड होना चाहिए, जो बाकी के लिए जवाब, कैप्शन या लेजेंड की जानकारी देता हो पैरंट <details> एलिमेंट के कॉन्टेंट का हिस्सा जिसमें उसे नेस्ट किया गया है. <summary> एलिमेंट का कॉन्टेंट कोई भी हेडिंग हो सकता है पैराग्राफ़ में इस्तेमाल किया जा सकने वाला कॉन्टेंट, सादा टेक्स्ट या एचटीएमएल.

खास जानकारी वाले मार्कर को टॉगल करना

पिछले दो कोडपेन में, आपको इनलाइन-स्टार्ट के ऐरो की जानकारी मिलेगी सारांश के किनारे पर क्लिक करें. जानकारी देने वाला विजेट, आम तौर पर स्क्रीन पर एक छोटे त्रिभुज का इस्तेमाल करके दिखाया जाता है, जो घूमता या घुमाता है 'खुली/बंद स्थिति' दिखाने के लिए, ट्राईऐंगल के बगल में एक लेबल लगा होता है. <summary> एलिमेंट का कॉन्टेंट, जानकारी देने वाले विजेट को लेबल करता है. हर सेक्शन में सबसे ऊपर मौजूद घूमता हुआ तीर ::marker सेट किया हुआ है. <summary> एलिमेंट. सूची आइटम की तरह, <summary> एलिमेंट भी list-style के साथ काम करता है शॉर्टहैंड प्रॉपर्टी और इसकी लॉन्गहैंड प्रॉपर्टी. इसमें list-style-type शामिल है. जानकारी ज़ाहिर करने वाले ट्राईऐंगल को सीएसएस की मदद से स्टाइल किया जा सकता है. इसमें, इस्तेमाल किए गए मार्कर को त्रिभुज से किसी अन्य बुलेट टाइप में बदलना शामिल है. इसमें ये भी शामिल हैं list-style-image वाली इमेज.

दूसरी स्टाइल लागू करने के लिए, details summary::marker से मिलते-जुलते सिलेक्टर का इस्तेमाल करें. कॉन्टेंट बनाने ::marker pseudo-element केवल सीमित स्टाइल को स्वीकार करता है. इस ::marker पर क्लिक करके, इसे आसान स्टाइल ::before से बदला जा रहा है सीएसएस स्टाइल में एक सामान्य तरीका यह है कि वह मौजूदगी (या न होने) के आधार पर जनरेट किए गए कॉन्टेंट की स्टाइल में थोड़ा-बहुत बदलाव करता है ओपन एट्रिब्यूट की वैल्यू शामिल करें. list-style: none को सेट करके या कॉन्टेंट सेट करके, जानकारी देने वाले विजेट का आइकॉन हटाया जा सकता है none के लिए मार्कर का इस्तेमाल करें. हालांकि, देख सकने वाले लोगों को यह बताने के लिए हमेशा विज़ुअल इंडिकेटर शामिल करें कि खास जानकारी वाला कॉन्टेंट एक टॉगल है इस बटन पर क्लिक करने से, ऐक्टिवेशन मिलने पर कॉन्टेंट दिखेगा और छिप जाएगा.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

यह उदाहरण डिफ़ॉल्ट मार्कर को हटा देता है. साथ ही, जानकारी बंद होने पर + और - बनाने के लिए जनरेट किया गया कॉन्टेंट जोड़ देता है जब विवरण खुले हों.

अगर आपको जानकारी वाले ब्लॉक को डिफ़ॉल्ट रूप से खोलना है, तो शुरुआती <details> टैग में open एट्रिब्यूट को शामिल करें. स्पेस भी जोड़ा जा सकता है खोज नतीजों में दिखने का तरीका बेहतर बनाने के लिए, जनरेट किए गए कॉन्टेंट से बनाए गए मार्कर के रोटेशन और ट्रांज़िशन के बीच बदलाव करे. ऐसा करने के लिए:

गड़बड़ियों को कैसे हैंडल किया जाता है

अगर आप <summary> शामिल नहीं करते हैं, तो ब्राउज़र आपके लिए एक मार्कर और "ब्यौरा" शब्द बना देगा. यह खास जानकारी शैडो रूट का हिस्सा है और इसलिए लेखक की सीएसएस समरी स्टाइल लागू नहीं होगी. दुर्भाग्य से, Safari में शामिल नहीं है कीबोर्ड फ़ोकस ऑर्डर में दी गई जानकारी को सही तरीके से सेट किया जा सके.

अगर <summary> को शामिल किया जाता है, लेकिन यह <details> का पहला एलिमेंट नहीं है, तब भी ब्राउज़र खास जानकारी दिखाता है करना चाहिए. ब्राउज़र में जवाब में कोई लिंक, लेबल या अन्य इंटरैक्टिव एलिमेंट शामिल करने पर भी जवाब नहीं मिलेगा इंटरैक्टिव कॉन्टेंट में इंटरैक्टिव कॉन्टेंट को अलग तरीके से मैनेज करना. उदाहरण के लिए, अगर आप जवाब में कोई लिंक शामिल करते हैं, तो कुछ ब्राउज़र डिफ़ॉल्ट टैबिंग ऑर्डर में, खास जानकारी और लिंक, दोनों को जोड़ देगा. हालांकि, दूसरे ब्राउज़र डिफ़ॉल्ट रूप से लिंक पर फ़ोकस नहीं करेंगे. अगर <summary> में नेस्ट किए गए <label> पर क्लिक किया जाता है, तो कुछ ब्राउज़र इससे जुड़े फ़ॉर्म कंट्रोल पर फ़ोकस करेंगे; दूसरे ब्राउज़र फ़ोकस, फ़ॉर्म के कंट्रोल पर फ़ोकस करेगा और <details> को चालू या बंद पर टॉगल करेगा.

HTMLDetailsElement इंटरफ़ेस

सभी एचटीएमएल एलिमेंट की तरह, HTMLDetailsElement सभी एलिमेंट को इनहेरिट करता है प्रॉपर्टी, तरीके, और HTMLElement से इवेंट जोड़ देगा. open इंस्टेंस प्रॉपर्टी और toggle इवेंट. HTMLDetailsElement.open प्रॉपर्टी एक बूलियन है open एचटीएमएल एट्रिब्यूट को दिखाने वाली वैल्यू. इससे पता चलता है कि एलिमेंट का कॉन्टेंट (<summary> को शामिल किए बिना) उपयोगकर्ता को दिखाया जाना है या नहीं. टॉगल इवेंट चालू किया गया जब <details> एलिमेंट को खुला या बंद टॉगल किया जाता है. addEventListener() का इस्तेमाल करके, यह इवेंट सुना जा सकता है.

अगर आपको उपयोगकर्ता की ओर से खुली हुई जानकारी को बंद करने के लिए कोई स्क्रिप्ट लिखनी है, तो ओपन एट्रिब्यूट हटाएं removeAttribute("open") का इस्तेमाल करके:

JavaScript का इस्तेमाल करने का सिर्फ़ यही उदाहरण है. किसी अन्य साइट को बंद करने की इस सुविधा के अलावा, शायद आपको JavaScript की ज़रूरत न हो जानकारी देने वाले विजेट खोले गए.

याद रखें, <details> और <summary> को काफ़ी ज़्यादा स्टाइल किया जा सकता है. इनका इस्तेमाल टूल से जुड़ी सलाह बनाने के लिए भी किया जा सकता है. हालांकि, अगर आपको इन सिमैंटिक एलिमेंट का इस्तेमाल उन मामलों में करना है जहां नेटिव सिमेंटिक एक-दूसरे से मेल नहीं खाते, तो हमेशा इस बात का ध्यान रखें कि आपकी सुलभता बनी रहें. ज़्यादातर मामलों में, एचटीएमएल को डिफ़ॉल्ट रूप से ऐक्सेस किया जा सकता है. डेवलपर के तौर पर हमारा काम यह पक्का करना है कि हमारे कॉन्टेंट को सभी लोग ऐक्सेस कर सकें.

देखें कि आपको कितना समझ आया है

जानकारी और खास जानकारी के बारे में अपनी जानकारी परखें.

<summary> किस एलिमेंट का पहला चाइल्ड होना चाहिए?

<p>

फिर से कोशिश करें.

<details>

सही!

<fieldset>

फिर से कोशिश करें.