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

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

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> एलिमेंट खुलता है, तो कोड दूसरे खुले हुए <details> एलिमेंट का पता लगाकर, name एट्रिब्यूट की एक ही वैल्यू का इस्तेमाल करता है और उन्हें बंद कर देता है.

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