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

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

Bramus

الأكورديون

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

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

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

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

دعم المتصفح

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