شرح صفوف ومحتوى الفقرة
عندما تحتاج إلى فتح قسم مطوي أو إغلاقه استجابةً لمنطق برمجي مخصص (مثل إظهار خيارات الشحن فور اختيار التوصيل السريع)، استخدم الواجهة القياسية bootstrap.Collapse.getOrCreateInstance(el, { toggle: false }) لتفادي إنشاء نسخ مكررة في الذاكرة أو تشغيل الحركة فور التهيئة دون قصد.
كذلك يوفّر المكوّن أربعة أحداث دقيقة في دورة حياته يمكنك الاستماع إليها بـ addEventListener: الحدثان الفوريان show.bs.collapse وhide.bs.collapse لحظة بدء النقرة، والحدثان اللاحقان shown.bs.collapse وhidden.bs.collapse بعد اكتمال انتقال CSS تماماً.
<button id="apiBtn" class="btn btn-primary mb-2"
type="button">Toggle via JS API</button>
<span id="stateBadge"
class="badge text-bg-secondary ms-2">Closed</span>
<div class="collapse" id="apiPanel">
<div class="card card-body">bootstrap.Collapse</div>
</div>مرجع كلاسات وسمات وأحداث مكوّن Collapse
| العنصر / الواجهة | النوع | الوظيفة الدقيقة في Bootstrap 5.3 |
|---|---|---|
.collapse | كلاس حالة | يخفي الكتلة افتراضياً بانتظار التفعيل التصريحي أو البرمجي. |
.collapse.show | كلاس حالة | يعرض الكتلة مفتوحة منذ لحظة تحميل المستند. |
.collapse-horizontal | كلاس محور | يبدّل الحركة من الارتفاع الرأسي إلى العرض الأفقي مع اشتراط عرض للطفل. |
data-bs-toggle="collapse" | سمة تشغيل | تربط الزر أو الرابط بمحرك الطي التلقائي دون كود جافاسكريبت. |
shown.bs.collapse | حدث DOM | ينطلق بعد انتهاء حركة الانفتاح بالكامل واستقرار الأبعاد. |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس دورة حياة مكوّن الطي .collapse، وتشغيله عبر الأزرار والروابط بسمة data-bs-target، وتطبيق الطي الأفقي .collapse-horizontal والتحكم المتعدد، مع استيفاء سمات aria-expanded وإدارة الأحداث عبر bootstrap.Collapse. الخطوة التالية: انتقل الآن إلى الدرس التالي لبناء القوائم المطوية المتكاملة عبر مكوّن Accordion الأصيل في بوتستراب 5.