Bootstrap 4 JS Runtuh
Ciutkan Kelas CSS
Untuk tutorial tentang Collapsibles, baca Tutorial Bootstrap Collapse kami .
| Class | Description | Example |
|---|---|---|
.collapse |
Hides the content | |
.collapse show |
Shows the collapsible content by default | |
.collapsing |
Added when the transition starts, and removed when it finishes |
Melalui data-* Atribut
Cukup tambahkan data-toggle="collapse"dan a data-targetke elemen untuk secara otomatis menetapkan kontrol elemen yang dapat dilipat. Atribut target data menerima pemilih CSS untuk menerapkan penciutan. Pastikan untuk menambahkan keruntuhan kelas ke elemen yang dapat diciutkan. Jika Anda ingin default terbuka, tambahkan kelas tambahan "show".
Contoh
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Tips: Untuk menambahkan manajemen grup seperti akordeon ke kontrol yang dapat diciutkan, tambahkan atribut data data-parent="#selector".
Melalui JavaScript
Aktifkan secara manual dengan:
$('.collapse').collapse()
Ciutkan Opsi
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-parent="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) | |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Ciutkan Metode
Tabel berikut mencantumkan semua metode penciutan yang tersedia.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element | |
| .collapse("dispose") | Destroys the collapsible element |
Ciutkan Acara
Tabel berikut mencantumkan semua peristiwa penciutan yang tersedia.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |