مشغلات الطي بالأزرار والروابط | الطي والإظهار Collapse في بوتستراب 5

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

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

يمكنك تشغيل أي كتلة قابلة للطي بطريقتين قياسيتين دون كتابة سطر جافاسكريبت واحد؛ إما عبر وسم زر دلالي <button> يحمل السمة data-bs-toggle="collapse" مع السمة data-bs-target="#id"، وإما عبر رابط <a role="button"> يشير معرّفه المرجعي href="#id" إلى نفس الكتلة المستهدفة.

في المشاريع الاحترافية يُفضَّل دائماً استخدام عنصر <button type="button"> لأنه لا يغيّر شريط العنوان في المتصفح ولا يقفز بأعلى الصفحة إذا تأخر تحميل ملف السكريبت. استعرض المثال الحي التالي لترى الطريقتين معاً:

الصف 2 كود برمجي

HTML

<p class="d-inline-flex gap-2">
  <a class="btn btn-outline-primary" href="#invBox"
     data-bs-toggle="collapse" role="button">Link</a>
  <button class="btn btn-primary" type="button"
     data-bs-toggle="collapse" data-bs-target="#invBox">
    Button
  </button>
</p>
<div class="collapse" id="invBox">
  <div class="card card-body">Paid in full.</div>
</div>

جرّب بنفسك

Collapse Button Triggers مشغلات الطي بالأزرار والروابط

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

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