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

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

الأكورديون

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

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

العرض التوضيحي: Accordion مع HTML وCSS

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

دعم المتصفح

  • Chrome: 120.
  • الحافة: 120.
  • Firefox: 130.
  • Safari: الإصدار 17.2.

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

لتحقيق ذلك على الويب، يمكنك الآن إضافة السمة 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>
العرض التوضيحي: أكورديون حصري مع HTML وCSS.

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

العرض التوضيحي: عدة قوائم أكورديون حصرية باستخدام HTML وCSS

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