انتقل إلى محتوى الدرس

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

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

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

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

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

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

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