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

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

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

आपको सिर्फ़ <details> और <summary> एलिमेंट की ज़रूरत है: ये कॉन्टेंट को बड़ा और छोटा करने के लिए, पहले से मौजूद एक तरीका है. जब कोई उपयोगकर्ता <summary> पर क्लिक या टैप करता है या <summary> पर फ़ोकस होने पर Enter बटन छोड़ता है, तो पैरंट <details> के कॉन्टेंट दिखने लगते हैं.

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

इसका मतलब है कि इस CodePen (और सभी CodePen सैंपल) में कोई 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> एलिमेंट के कॉन्टेंट में, हेडिंग का कोई भी कॉन्टेंट, सामान्य टेक्स्ट या एचटीएमएल हो सकता है. इसका इस्तेमाल पैराग्राफ़ में किया जा सकता है.

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

पहले के दो Codepen में, खास जानकारी के inline-start साइड में एक ऐरो है. एक्सपैंडर ऐरो आम तौर पर स्क्रीन पर दिखता है. यह एक छोटा त्रिकोण होता है, जो खुला या बंद होने की स्थिति दिखाने के लिए घूमता (या मुड़ता) है. इसके अलावा, त्रिकोण के बगल में एक लेबल होता है. <summary> एलिमेंट का कॉन्टेंट, डिसक्लोज़र विजेट को लेबल करता है.

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

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

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

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

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

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

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

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

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

HTMLDetailsElement इंटरफ़ेस

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

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

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

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

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

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