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

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