Bootstrap 4 Collapse
أساسي قابل للطي
تعد العناصر القابلة للطي مفيدة عندما تريد إخفاء كمية كبيرة من المحتوى وإظهارها:
مثال
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
شرح المثال
تشير .collapseالفئة إلى عنصر قابل للطي (<div> في مثالنا) ؛ هذا هو المحتوى الذي سيتم عرضه أو إخفاؤه بنقرة زر واحدة.
للتحكم في (إظهار / إخفاء) المحتوى القابل للطي ، أضف data-toggle="collapse"السمة إلى <a> أو عنصر <button>. ثم أضف data-target="#id"السمة لتوصيل الزر بالمحتوى القابل للطي (<div id = "demo">).
ملاحظة: بالنسبة لعناصر <a> ، يمكنك استخدام hrefالسمة بدلاً من data-target
السمة:
مثال
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
افتراضيًا ، يكون المحتوى القابل للطي مخفيًا. ومع ذلك ، يمكنك إضافة .showالفصل لإظهار المحتوى افتراضيًا:
مثال
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
الأكورديون
يوضح المثال التالي أكورديونًا بسيطًا من خلال توسيع مكون البطاقة.
ملاحظة: استخدم data-parentالسمة للتأكد من إغلاق جميع العناصر القابلة للطي ضمن العنصر الرئيسي المحدد عند عرض أحد العناصر القابلة للطي.
مثال
<div id="accordion">
<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..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
إكمال مرجع Bootstrap 4 Collapse
للحصول على مرجع كامل لجميع خيارات الانهيار والأساليب والأحداث ، انتقل إلى مرجع Bootstrap 4 JS Collapse .