انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: الطي والإظهار Collapse في بوتستراب 5

Multiple Collapse Targets طي وإظهار عدة عناصر معاً

أتقن مكوّن الطي والإظهار Collapse في بوتستراب 5 عبر سمات data-bs-toggle وجافاسكريبت القياسية لتحريك اللوحات الرأسية والأفقية والتحكم المتعدد وسمات الإتاحة والأحداث البرمجية.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تقبل السمة data-bs-target أي محدّد CSS Selector صالح وليس مجرّد معرّف مفرد #id؛ مما يمكّنك من طيّ أو إظهار عدّة بطاقات معاً بضغطة زر واحدة عبر إعطائها كلاساً مشتركاً مثل .multi-collapse وتمريره في data-bs-target=".multi-collapse".

اختبر في المختبر التفاعلي التالي الفرق المباشر بين الطي الرأسي، والطي الأفقي، والتحكم المتعدد:

الصف 2 كود برمجي
HTML 
<div class="d-flex gap-2 mb-2">
  <button class="btn btn-primary" type="button"
    data-bs-toggle="collapse"
    data-bs-target=".m-box">Toggle Both</button>
</div>
<div class="row g-2">
  <div class="col"><div class="collapse m-box" id="cA">
    <div class="card card-body">Region A</div></div></div>
  <div class="col"><div class="collapse m-box" id="cB">
    <div class="card card-body">Region B</div></div></div>
</div>
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (الطي والإظهار Collapse في بوتستراب 5)