खास अकॉर्डियन

एक ही name वाले कई <details> एलिमेंट के साथ एक एक्सक्लूज़िव अकॉर्डियन बनाएं.

Bramus

अकॉर्डियन

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

वेब पर इस पैटर्न को लागू करने के लिए, कुछ <details> एलिमेंट को आपस में जोड़ा जाता है. आम तौर पर, उन्हें विज़ुअल तौर पर ग्रुप में रखा जाता है, ताकि यह पता चल सके कि वे एक साथ इस्तेमाल किए जा सकते हैं.

खास अकॉर्डियन

एक्सक्लूज़िव अकॉर्डियन, अकॉर्डियन पैटर्न का एक वैरिएशन है. इसमें एक बार में सिर्फ़ एक डिसक्लोज़र विजेट खोला जा सकता है.

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

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

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

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

खास अकॉर्डियन को पॉलीफ़िल करना

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

जब name वाला कोई <details> एलिमेंट खुलता है, तो कोड name एट्रिब्यूट की एक ही वैल्यू वाले अन्य खुले हुए <details> एलिमेंट ढूंढता है और उन्हें बंद कर देता है.

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

ब्राउज़र के कुछ पुराने वर्शन, इस toggle इवेंट को ट्रिगर नहीं करते. ऐसे ब्राउज़र में, पॉलीफ़िल कोड कुछ भी नहीं करेगा. प्रगतिशील तरीके से बेहतर बनाने के मामले में, यह स्वीकार किया जा सकता है.