Collapse ساده

در  Collapsibles هنگامی که شما می خواهید مقدار زیادی از مطالب را مخفی کنید مفید هستند

 <button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div> 

مثال توضیح داده شده

کلاس collapse یک عنصر collapsible  یک <div> در مثال ما) را نشان می دهد. این محتوا است که با کلیک یک دکمه نمایش داده می شود یا پنهان می شود.

برای کنترل (نشان دادن / پنهان کردن) محتوای قابل انعطاف، ویژگی data-toggle="collapse"  را به عنصر <a> یا <button> اضافه کنید. سپس attribute 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 را برای نمایش محتوا به طور پیش فرض اضافه کنید:

Accordion

مثال زیر یک آکوردئون ساده با گسترش جزئیات کارت نشان می دهد

توجه: از ویژگی data-parent استفاده کنید تا اطمینان حاصل کنید که تمام عناصر قابل انعطاف تحت والد مشخص شده هنگامی که یکی از آیتم های قابل انعطاف نشان داده شده دیگری بسته شود.

 <div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>