قائمة أكورديون حصرية

أنشئ قائمة أكورديون حصرية تحتوي على عدة عناصر <details> تحتوي على name نفسها.

Bramus

الأكورديون

نمط واجهة المستخدم الشائع على الويب هو مكون أكورديون. هذا مكوِّن يتألف من عدة أدوات إفصاح يمكن توسيعها (أو تصغيرها) بشكل فردي لإظهار (أو إخفاء) المحتوى.

لتنفيذ هذا النمط على الويب، عليك دمج بعض عناصر <details> وتجميعها عادةً بشكل مرئي للإشارة إلى أنّها تنتمي إلى بعضها البعض.

آلة الأكورديون الحصرية

هناك شكل آخر لنمط الأكورديون، وهو أكورديون حصري يمكن فيه فتح أداة واحدة فقط من أدوات الإفصاح في الوقت نفسه.

لتحقيق ذلك على الويب، يمكنك الآن إضافة السمة name إلى عناصر <details>. عند استخدام هذه السمة، تشكِّل عناصر <details> متعددة لها القيمة name نفسها مجموعة دلالية، وستعمل كقائمة أكورديون حصرية. عند فتح أحد عناصر <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>

يمكن أن تحتوي الصفحة على عدة قوائم أكورديون حصرية. عندما تستخدم قيمة name جديدة في عنصر <details>، يتم إنشاء مجموعة منطقية جديدة.

يُرجى ملاحظة أنّ عناصر <details> التي تشكّل جزءًا من أكورديون حصري ليس من الضروري أن تكون من الأشقاء بالضرورة. ويمكن أن تكون متفرقة في المستند. هذه السمة name هي التي تجمعهم، وليس ترتيب DOM.

إضافة نغمات الأكورديون الحصرية باستخدام بيانات المضلع

باستخدام JavaScript التالي، يمكن تعويض سلوك أكورديون حصري. يعتمد هذا الرمز على الحدث toggle للعنصر <details>.

عندما يفتح عنصر <details> يتضمّن name، يعثر الرمز على عناصر <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 هذا. ولن يؤدي رمز polyfill إلى تنفيذ أي شيء في تلك المتصفّحات. يُعدّ هذا السلوك مقبولاً من حيث التحسين التدريجي.