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

जानें कि काम की जानकारी और खास जानकारी देने वाले एलिमेंट कैसे काम करते हैं और उन्हें कहां इस्तेमाल किया जा सकता है.

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

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

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

जांचें कि आपको कितना समझ आया

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