انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 39
دورة بوتستراب 5

الطي والإظهار Collapse في بوتستراب 5Bootstrap 5 Collapse

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

Collapse Visibility Mechanics آلية عمل الطي والإظهار

يوفّر مكوّن الطي والإظهار Collapse في إطار Bootstrap 5.3 آلية أنيقة لإخفاء الكتل التفصيلية الطويلة وإظهارها عند الطلب بانتقال بصري ناعم، مما يحافظ على نظافة شاشة المستخدم فوق الطية الأولى. وعلى خلاف الإصدار الرابع القديم، يعمل هذا المكوّن بالكامل عبر جافاسكريبت القياسية داخل حزمة bootstrap.bundle.min.js دون أي اعتماد على مكتبة jQuery.

تعتمد دورة حياة العنصر القابل للطي على ثلاث مراحل متعاقبة يديرها الإطار تلقائياً: يبدأ العنصر مخفياً بكلاس .collapse، وعند النقر يستبدله الإطار مؤقتاً بكلاس .collapsing ريثما تكتمل حركة الارتفاع، ثم يستقر على .collapse.show لعرض المحتوى كاملاً، أو يمكنك إضافة .show منذ البداية لفتحه افتراضياً عند تحميل الصفحة.

مخطط دورة انتقال حالات الطي من collapse إلى collapsing ثم collapse.show في بوتستراب 5

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

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

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

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>
جرّب بنفسك

Horizontal Collapse Mode نمط الطي الأفقي الحديث

أضاف الإصدار الخامس كلاس .collapse-horizontal لدعم الطي العرضي الأفقي على محور العرض width بدلاً من محور الارتفاع height، وهو مثالي لإظهار بطاقة مساعدة جانبية أو تفاصيل سريعة بجوار الأزرار.

لكي ينساب النص بسلاسة أثناء فتح العرض من الصفر دون إعادة تكسير الأسطر في كل إطار زمني، احرص على منح البطاقة الداخلية عرضاً محدداً (مثل style="width: 280px;") مع وضع حد أدنى للارتفاع على الحاوية الخارجية إن أردت تثبيت العناصر المجاورة.

مقارنة الطي الرأسي القياسي والطي الأفقي collapse-horizontal والتحكم المتعدد في بوتستراب 5
HTML 
<button class="btn btn-primary mb-2" type="button"
  data-bs-toggle="collapse" data-bs-target="#sideNote">
  Toggle Side Note
</button>
<div style="min-height: 110px;">
  <div class="collapse collapse-horizontal" id="sideNote">
    <div class="card card-body" style="width: 280px;">
      Horizontal panel slides smoothly along the width axis.
    </div>
  </div>
</div>
جرّب بنفسك

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

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

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

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>
جرّب بنفسك

Collapse ARIA Attributes سمات الإتاحة لقارئات الشاشة

لا يكتمل بناء مكوّن الطي الاحترافي دون ضبط عقد الإتاحة لقارئات الشاشة ولوحة المفاتيح؛ إذ يجب ضبط السمة aria-expanded="false" على زر المشغل إذا كان القسم مغلقاً عند البداية، أو aria-expanded="true" إذا بدأ القسم مفتوحاً بكلاس .show، وسيواصل الإطار تبديل قيمتها تلقائياً بعد ذلك.

كما تربط السمة aria-controls="panelId" الزر بمعرّف الكتلة المطوية برمجياً، وعندما يتحكم زر واحد في عدة كتل تفصل بين معرّفاتها بمسافة مثل aria-controls="colA colB".

Collapse JavaScript API التحكم البرمجي بكائن Collapse

عندما تحتاج إلى فتح قسم مطوي أو إغلاقه استجابةً لمنطق برمجي مخصص (مثل إظهار خيارات الشحن فور اختيار التوصيل السريع)، استخدم الواجهة القياسية bootstrap.Collapse.getOrCreateInstance(el, { toggle: false }) لتفادي إنشاء نسخ مكررة في الذاكرة أو تشغيل الحركة فور التهيئة دون قصد.

كذلك يوفّر المكوّن أربعة أحداث دقيقة في دورة حياته يمكنك الاستماع إليها بـ addEventListener: الحدثان الفوريان show.bs.collapse وhide.bs.collapse لحظة بدء النقرة، والحدثان اللاحقان shown.bs.collapse وhidden.bs.collapse بعد اكتمال انتقال CSS تماماً.

HTML 
<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.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Collapse Component مكوّن الطي والإظهار
إضافة تفاعلية في بوتستراب 5 تبدّل إظهار وإخفاء حاويات المحتوى بحركة ارتفاع أو عرض انسيابية بالاعتماد على جافاسكريبت القياسية.
للمراجعة
02 Horizontal Collapse الطي الأفقي العرضي
كلاس تعديلي في بوتستراب 5 يحول محور حركة الانطواء من الارتفاع إلى العرض مع اشتراط تحديد عرض ثابت للعنصر الداخلي.
للمراجعة
03 Transition Class (.collapsing) كلاس المرحلة الانتقالية
كلاس مؤقت يضيفه إطار بوتستراب تلقائياً لحظة بدء حركة الفتح أو الإغلاق لضبط الارتفاع التدرجي ثم يزيله فور انتهائها.
للمراجعة
04 Multi-Target Selector محدّد الأهداف المتعددة
تمرير اسم كلاس مشترك في سمة data-bs-target لتمكين زر واحد من فتح أو طي عدة عناصر في اللحظة نفسها.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 ARIA ARIA
Accessible Rich Internet Applications
مجموعة سمات قياسية مثل aria-expanded وaria-controls تبلّغ قارئات الشاشة بحالة فتح أو طي المحتوى لحظياً.
للمراجعة
02 DOM DOM
Document Object Model
الشجرة البرمجية للصفحة التي تبقى العناصر المطوية موجودة بداخلها وتطلق عبرها أحداث الفتح والإغلاق.
للمراجعة
03 API API
Application Programming Interface
الدوال البرمجية القياسية في كائن bootstrap.Collapse للتحكم في العناصر المطوية من كود جافاسكريبت.
للمراجعة
04 CSS CSS
Cascading Style Sheets
تتولى تنفيذ الانتقال البصري السلس للارتفاع أو العرض عند تبديل كلاسات الطي.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ زراً بكلاس btn-primary يستخدم سمتي data-bs-toggle="collapse" وdata-bs-target="#receiptBox" مع ضبط aria-expanded="false" وaria-controls="receiptBox" لإظهار بطاقة تفاصيل داخلية.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. صمّم حاوية تحمل كلاسي collapse وcollapse-horizontal بداخلها بطاقة بعرض 260px، واربط زراً بحدث نقر يستدعي bootstrap.Collapse.getOrCreateInstance مع خيار toggle: false.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما السمة القياسية في بوتستراب 5 التي حلّت محل سمة data-toggle="collapse" القديمة؟

اعتمد بوتستراب 5 البادئة الموحدة data-bs-* لجميع المكونات التفاعلية لمنع التعارض مع المكتبات الأخرى.

02

ما تركيبة الكلاسات التي تجعل القسم القابل للطي يظهر مفتوحاً منذ لحظة تحميل الصفحة؟

إضافة كلاس show بجانب كلاس collapse تجعل المحتوى ظاهراً افتراضياً مع ضبط aria-expanded="true" على الزر.

03

ما الشرط العملي على العنصر الابن المباشر عند استخدام الطي الأفقي collapse-horizontal لضمان سلاسة الحركة؟

يمنع العرض الثابت للعنصر الداخلي انكسار الأسطر المتكرر أثناء تزايد عرض الحاوية الأب من الصفر.

04

يحتاج مكوّن Collapse في بوتستراب 5 إلى وجود مكتبة jQuery لتشغيل حركة الارتفاع.

تخلّى بوتستراب 5 نهائياً عن مكتبة jQuery ويعمل مكوّن Collapse بالكامل عبر جافاسكريبت القياسية.

05

لماذا يُنصح بتمرير الخيار { toggle: false } عند إنشاء نسخة من bootstrap.Collapse برمجياً؟

لأن القيمة الافتراضية لخيار toggle هي true، فإن تمرير false يجهّز الكائن للتحكم اللاحق دون تشغيل الحركة لحظة قراءة الكود.

06

أي حدث من أحداث Collapse ينطلق فقط بعد اكتمال حركة الفتح البصرية تماماً؟

ينطلق show.bs.collapse فور بدء الفتح، بينما ينتظر shown.bs.collapse انتهاء انتقال CSS واستقرار ارتفاع العنصر.

07

يمكن لزر واحد أن يطوي أو يظهر عدة عناصر collapse معاً إذا أشارت سمة data-bs-target إلى محدّد كلاس مشترك.

تقبل سمة data-bs-target أي محدّد CSS قياسي فتطبق الإجراء على كافة العناصر الحاملة للكلاس المشترك.

08

إخفاء السجلات السرية داخل عنصر .collapse يمنع الزوار من قراءتها عبر أدوات المطور في المتصفح.

العنصر المطوي يظل محمّلاً بالكامل في شجرة DOM؛ لذا يجب فحص الصلاحيات وحجب البيانات الحساسة من الخادم دائماً.