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

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