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

أنشئ نموذجًا حصريًا للAccordion يتضمّن عدة عناصر <details> لها name نفسها.

Bramus

الأكورديون

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

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

عرض توضيحي: أكورديون باستخدام HTML وCSS

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

Browser Support

  • Chrome: 120.
  • Edge: 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 التالي، من الممكن إضافة polyfill إلى سلوك ملف الأركان الأساسية الحصري. يعتمد الرمز على حدث 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 إلى أيّ إجراء. من حيث التحسين التدريجي، هذا سلوك مقبول.