شرح صفوف ومحتوى الفقرة
يعتمد زر .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.