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