يمكنك إنشاء قائمة أكورديون حصرية تحتوي على عناصر <details>
متعدّدة تتضمّن سمة name
نفسها.
آلة الأكورديون
نمط واجهة المستخدم الشائع على الويب هو مكون أكورديون. هذا مكوِّن يتكون من العديد من التطبيقات المصغّرة للإفصاح التي يمكن توسيعها (أو تصغيرها) بشكل فردي لكشف (أو إخفاء) المحتوى الخاص بها.
لتطبيق هذا النمط على الويب، يمكنك دمج بعض عناصر <details>
وتجميعها عادةً بشكل مرئي للإشارة إلى أنها تنتمي معًا.
آلة الأكورديون الحصرية
دعم المتصفح
- 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>
يمكن أن تحتوي الصفحة على عدة قوائم أكورديون حصرية. عند استخدام قيمة name
جديدة في عنصر <details>
، يتم إنشاء مجموعة منطقية جديدة.
تجدر الإشارة إلى أنّ عناصر <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 أي شيء. في ما يتعلق بالتحسين التدريجي، يُعدّ هذا سلوكًا مقبولاً.