Bootstrap 4 Collapse
ستتعلم في هذا الدرس عمل ال Collapse وهو اخفاء محتوي واظهارة عن طريق button بواسطة ال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap 4 Collapse
</> Bootstrap 4 Collapse
ال Collapse هو إخفاء محتوي وإظهاره عن طريق button يمكنك استخدامه بسهوله عن طريق الخطوات التالية :
- قم بعمل button ثم ضف له collapse class
- قم بإضافة attribute لل button وهي data-toggle قم بإضافة value وهي collapse
- قم بإضافة div للمحتوي الذي تريد اخفاؤه واظهاره عند الضغط علي ال button
- قم بإضافة attribute لل div وهي id قم بإضافة value وهي demo يمكنك تسميته اي اسم كما تشاء
- قم بإضافة attribute لل button وهي data-target قم بإضافة value وهي demo# لاحظ انها هي نفس الاسم بداخل ال id الخاص بال div
Result
يظهر الكود بهذا الشكل على المتصفح
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</> Accordion
استخدم ال data-parent attribute مع ال href attribute لربطهم معاً لكل item نفس الاسم
Result
يظهر الكود بهذا الشكل على المتصفح
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
