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

एक जैसे name वाले कई <details> एलिमेंट के साथ कोई खास अकॉर्डियन बनाएं.

अकॉर्डियन

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

वेब पर इस पैटर्न को लागू करने के लिए, कुछ <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 इवेंट को सक्रिय नहीं करते हैं. उन ब्राउज़र में पॉलीफ़िल कोड कुछ नहीं करेगा. बेहतर बनाने की सुविधा के मुताबिक, इस तरह के व्यवहार को स्वीकार किया जाता है.