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

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