Bootstrap 4 Runtuh
Dasar Dapat Dilipat
Collapsibles berguna saat Anda ingin menyembunyikan dan menampilkan konten dalam jumlah besar:
Contoh
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Contoh Dijelaskan
Kelas .collapsemenunjukkan elemen yang dapat dilipat (a <div> dalam contoh kita); ini adalah konten yang akan ditampilkan atau disembunyikan dengan mengklik tombol.
Untuk mengontrol (menampilkan/menyembunyikan) konten yang dapat diciutkan, tambahkan data-toggle="collapse"atribut ke elemen <a> atau <button>. Kemudian tambahkan data-target="#id"atribut untuk menghubungkan tombol dengan konten yang dapat diciutkan (<div id="demo">).
Catatan: Untuk elemen <a>, Anda dapat menggunakan hrefatribut alih-alih data-target
atribut:
Contoh
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Secara default, konten yang dapat diciutkan disembunyikan. Namun, Anda dapat menambahkan .showkelas untuk menampilkan konten secara default:
Contoh
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Akordeon
Contoh berikut menunjukkan akordeon sederhana dengan memperluas komponen kartu.
Catatan: Gunakan data-parentatribut untuk memastikan bahwa semua elemen yang dapat diciutkan di bawah induk yang ditentukan akan ditutup ketika salah satu item yang dapat diciutkan ditampilkan.
Contoh
<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>
Referensi Tutup Bootstrap 4 Lengkap
Untuk referensi lengkap tentang semua opsi, metode, dan peristiwa penciutan, buka Referensi Runtuh Bootstrap 4 JS kami .