BS4 yig‘iladigan bloklar (collapse)
Oddiy yig‘iladigan blok (collapse)
Yig‘iladigan bloklar katta hajmdagi kontentni yashirish va ko‘rsatish kerak bo‘lganda qulay:
Misol
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
.collapse klassi yig‘iladigan elementni bildiradi (bizning misolimizda <div>); bu tugma bosilganda ko‘rsatiladigan yoki yashiriladigan kontentdir.
Yig‘iladigan kontentni boshqarish (ko‘rsatish/yashirish) uchun <a> yoki <button> elementiga data-toggle="collapse" atributini qo‘shing. So‘ngra tugmani yig‘iladigan kontent (<div id="demo">) bilan bog‘lash uchun data-target="#id" atributini qo‘shing.
Eslatma: <a> elementlari uchun data-target atributi o‘rniga href atributidan foydalanishingiz mumkin:
Misol
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
O‘zingiz sinab ko‘ring »
Standart holatda yig‘iladigan kontent yashirin bo‘ladi. Biroq kontentni standart holatda ko‘rsatish uchun .show klassini qo‘shishingiz mumkin:
Misol
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
O‘zingiz sinab ko‘ring »
Akkordeon
Quyidagi misolda kartochka komponentini kengaytirish orqali yaratilgan oddiy akkordeon ko‘rsatilgan.
Eslatma: Yig‘iladigan elementlardan biri ochilganda, ko‘rsatilgan ota element ostidagi barcha boshqa yig‘iladigan elementlar yopilishini ta’minlash uchun data-parent atributidan foydalaning.
Misol
<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>
O‘zingiz sinab ko‘ring »
Bootstrap 4 Collapse bo‘yicha to‘liq ma’lumotnoma
Barcha collapse parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap 4 JS Collapse ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!