في هذا الدرس 6تصفّح المواضيع
في الإصدار الرابع القديم كان المطورون يضطرون إلى تركيب القوائم المطوية يدوياً بتكديس عناصر .card وروابط مبعثرة بلا أسهم اتجاه مدمجة. أما في Bootstrap 5 فقد أصبح .accordion مكوّناً أصيلاً مستقلاً بذاته يبني فوق محرك Collapse مع تصميم عصري موحد، وحلقات تركيز واضحة، وأيقونة سهم متجهية SVG تدور بسلاسة بمقدار 180 درجة فور فتح القسم.
يُعدّ الأكورديون الخيار القياسي لعرض صفحات الأسئلة الشائعة، وتفاصيل فصول الدورات التعليمية، وأقسام إعدادات الحساب على شاشات الهواتف دون إطالة التمرير العمودي.
يتكوّن كل قسم داخل الحاوية .accordion من عنصر .accordion-item يضم شقيقين أساسيين: عنوان دلالي <h2 class="accordion-header"> بداخله زر .accordion-button، وتحته حاوية الانطواء .accordion-collapse.collapse التي تغلف المحتوى الداخلي .accordion-body.
انتبه لقاعدة ذهبية يغفل عنها الكثيرون: أي زر لقسم مغلق افتراضياً (أي لا تحمل لوحته كلاس .show) يجب أن يحمل الكلاس .collapsed مع aria-expanded="false" حتى يظهر لونه الهادئ ويشير سهمه للأسفل منذ اللحظة الأولى.
<div class="accordion" id="faqAcc">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#q1">
1. Billing Cycle</button>
</h2>
<div id="q1" class="accordion-collapse collapse show"
data-bs-parent="#faqAcc">
<div class="accordion-body">Monthly renewal.</div>
</div></div></div>السمة المسؤولة عن السلوك الكلاسيكي للأكورديون — حيث يؤدي فتح سؤال جديد إلى طيّ السؤال المفتوح سابقاً في اللحظة نفسها — هي data-bs-parent="#parentId" التي توضع على كل عنصر .accordion-collapse وتشير إلى معرّف الحاوية الأب .accordion.
عند نقر المستخدم على قسم جديد، يبحث محرك بوتستراب داخل الأب المحدد عن أي شقيق يحمل كلاس .show فيستدعي إغلاقه تلقائياً بالتزامن مع فتح القسم المطلوب.
في كثير من واجهات المتاجر ولوحات التصفية الجانبية يحتاج الزائر إلى فتح قسم «الماركة» وقسم «نطاق السعر» وقسم «التقييم» معاً في وقت واحد دون أن يغلق أحدها الآخر. لتحقيق هذا السلوك، احذف السمة data-bs-parent تماماً من عناصر .accordion-collapse فتصبح كل لوحة مستقلة بذاتها.
<div class="accordion" id="filterAcc">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#f1">
Category Filter</button>
</h2>
<div id="f1" class="accordion-collapse collapse show">
<div class="accordion-body">Laptops, Monitors</div>
</div></div>
</div>عندما تضع مكوّن .accordion داخل بطاقة .card أو عمود مؤطر، يؤدي اجتماع حدود الأكورديون الخارجية مع حدود البطاقة إلى ازدواج بصري مزعج. يعالج الكلاس .accordion-flush ذلك فوراً بإزالة الحدود الجانبية والزوايا المستديرة الخارجية ليلتصق الأكورديون بحواف حاويته الأم بنظافة تامة.
قارن الأنماط الثلاثة عملياً في المختبر التفاعلي التالي:
<div class="card">
<div class="accordion accordion-flush" id="flushAcc">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
type="button" data-bs-toggle="collapse"
data-bs-target="#m1">Module 1</button></h2>
<div id="m1" class="accordion-collapse collapse">
<div class="accordion-body">4 Lessons</div>
</div></div>
</div>
</div>يعتمد زر .accordion-button على خاصية الهامش المنطقي التلقائي لدفع أيقونة السهم إلى نهاية السطر؛ لذلك ما إن تربط ملف bootstrap.rtl.min.css مع dir="rtl" حتى ينتقل نص السؤال إلى اليمين ويستقر السهم تلقائياً في أقصى اليسار دون سطر تنسيق إضافي واحد.
كما يدعم العنصر <button> التنقل عبر مفتاح Tab والفتح بمفتاحي Enter وSpace أصلياً في كافة المتصفحات.
<div class="accordion" id="rtlFaq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#rq1">
Supported Browsers</button></h2>
<div id="rq1" class="accordion-collapse collapse show"
data-bs-parent="#rtlFaq">
<div class="accordion-body">Chrome, Firefox.</div>
</div></div>
</div>مرجع كلاسات وسمات مكوّن Accordion
| الكلاس / السمة | الموضع الصحيح | الدور الوظيفي في Bootstrap 5.3 |
|---|---|---|
.accordion | الحاوية الجذرية | تنشئ نطاق متغيرات الأكورديون وتؤطر العناصر المتتالية. |
.accordion-flush | بجانب .accordion | يزيل الحدود الخارجية واستدارة الزوايا للدمج داخل البطاقات. |
.accordion-button | عنصر <button> بالرأس | ينسق زر الفتح العريض ويضيف سهم الاتجاه الدوّار. |
.collapsed | على زر القسم المغلق | يعيد لون الزر واتجاه السهم لوضع الإغلاق الابتدائي. |
data-bs-parent="#id" | على .accordion-collapse | يفعّل الفتح الحصري بإغلاق الأقسام الشقيقة تلقائياً. |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء مكوّن .accordion الأصيل، وتركيب عناصر الرأس والزر المدمج مع كلاس .collapsed، والموازنة بين الفتح الحصري بسمة data-bs-parent ونمط البقاء مفتوحاً، واستخدام .accordion-flush وتكييف السهم مع RTL. الخطوة التالية: انتقل الآن إلى درس القوائم المنسدلة Dropdowns لإتقان قوائم الإجراءات الذكية وتموضعها عبر Popper.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Accordion Component مكوّن الأكورديون
- قائمة عمودية متراصة من العناوين التفاعلية واللوحات القابلة للطي مبنية أصلياً في بوتستراب 5 مع أسهم اتجاه دوّارة.
- للمراجعة
- 02 Exclusive Collapse الفتح الحصري للأقسام
- ربط اللوحات المطوية بمعرّف الحاوية الأب عبر سمة data-bs-parent بحيث يغلق القسم المفتوح تلقائياً عند فتح قسم آخر.
- للمراجعة
- 03 Flush Accordion الأكورديون المدمج بلا إطار
- كلاس تعديلي يزيل الحدود الجانبية والزوايا المستديرة ليتطابق الأكورديون مع حواف البطاقة أو العمود الحاوي له.
- للمراجعة
- 04 Collapsed Button State كلاس حالة الزر المطوي
- كلاس يُضاف وجوباً على زر القسم غير المفتوح عند البداية لضبط اتجاه السهم ولون الخلفية الهادئ.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 FAQ FAQ
- Frequently Asked Questions
- النمط التطبيقي الأشهر لمكوّن الأكورديون لعرض الأسئلة وإجاباتها باختصار وتنظيم.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- نمط تخطيط الواجهة العربية الذي ينقل سهم الأكورديون تلقائياً إلى أقصى اليسار.
- للمراجعة
- 03 SVG SVG
- Scalable Vector Graphics
- الصيغة المتجهية التي يرسم بها بوتستراب 5 أيقونة سهم الأكورديون بدقة عالية على كافة الشاشات.
- للمراجعة
- 04 ARIA ARIA
- Accessible Rich Internet Applications
- سمات الإتاحة القياسية التي تُعلم مستخدمي قارئات الشاشة بأي قسم مفتوح حالياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حاوية accordion بالمعرّف accountFaq تضم عنصرين accordion-item يبدأ الأول مفتوحاً بكلاس show والثاني مغلقاً بكلاس collapsed على زره، مع تفعيل الفتح الحصري عبر data-bs-parent="#accountFaq".
-
ضع مكوّن accordion يحمل كلاس accordion-flush داخل بطاقة card، واحذف سمة data-bs-parent ليتمكن المستخدم من إبقاء عدة أقسام تصفية مفتوحة معاً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما السمة التي تجعل فتح عنصر واحد في الأكورديون يغلق بقية العناصر المفتوحة تلقائياً؟
تربط سمة data-bs-parent على كل لوحة مطوية الأقسام ببعضها داخل الأب لضمان فتح قسم واحد فقط.
كيف تسمح للمستخدم بإبقاء عدة أقسام من الأكورديون مفتوحة في الوقت نفسه؟
عند غياب سمة data-bs-parent تعمل كل لوحة بشكل مستقل ولا تغلق شقيقاتها عند النقر.
ما الكلاس الذي يزيل الحدود الخارجية والزوايا المستديرة ليندمج الأكورديون بنظافة داخل بطاقة card؟
صُمم كلاس accordion-flush خصيصاً لإلغاء الإطار الخارجي واستدارة الحواف عند التضمين داخل حاوية مؤطرة.
ماذا يحدث بصرياً إذا نسيت إضافة كلاس collapsed على زر قسم مغلق عند تحميل الصفحة؟
يفترض تنسيق accordion-button حالة الفتح افتراضياً، وكلاس collapsed هو الذي يمنحه مظهر الإغلاق واتجاه السهم السفلي.
يوفّر بوتستراب 5 مكوّن accordion أصيلاً ومستقلاً بدلاً من الاعتماد القديم على ترقيع البطاقات في الإصدار الرابع.
قدّم الإصدار الخامس عائلة كلاسات accordion المخصصة بالكامل مع أيقونات متجهية وحركات مدمجة.
عند استخدام ملف bootstrap.rtl.min.css مع dir="rtl" يجب كتابة قواعد تعويم يدوية لنقل سهم الأكورديون إلى اليسار.
يتكفل ملف التنسيق العربي الرسمي بنقل السهم إلى أقصى اليسار تلقائياً دون أي تنسيق يدوي.
ما العنصر الدلالي الذي يغلف زر accordion-button مباشرة داخل كل عنصر أكورديون؟
تغليف الزر داخل عنوان يحمل كلاس accordion-header يمنح قارئات الشاشة فهرسة دلالية سليمة لعناوين الأقسام.
اعتماد رأس الأكورديون على وسم <button> الأصلي يتيح التنقل إليه بمفتاح Tab وفتحه بمفتاحي Enter أو Space تلقائياً.
توفّر عناصر الأزرار القياسية في HTML دعماً فطرياً كاملاً للوحة المفاتيح دون برمجة إضافية.