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

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

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

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

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