Bootstrap JS Runtuh
JS Runtuh (collapse.js)
Dapatkan gaya dasar dan dukungan fleksibel untuk komponen yang dapat dilipat seperti akordeon dan navigasi.
Ketergantungan plugin: Ciutkan membutuhkan plugin transisi untuk disertakan dalam versi Bootstrap Anda.
Untuk tutorial tentang Collapsibles, baca Tutorial Bootstrap Collapse kami .
Ciutkan Kelas Plugin
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Melalui data-* Atribut
Cukup tambahkan data-toggle="collapse" dan target data ke elemen untuk secara otomatis menetapkan kontrol elemen yang dapat diciutkan. 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 di.
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 |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| 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 |
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) |
Lebih Banyak Contoh
Sederhana Dilipat
Contoh berikut membuat tombol beralih konten yang diperluas dan diciutkan dari elemen lain:
Contoh
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
Panel yang Dapat Dilipat
Contoh berikut menunjukkan panel yang dapat dilipat:
Contoh
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Grup Daftar yang Dapat Dilipat
Berikut ini menunjukkan panel yang dapat dilipat dengan grup daftar di dalamnya:
Contoh
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Akordeon
Contoh berikut menunjukkan akordeon sederhana dengan memperluas komponen panel:
Catatan: Atribut data-parentmemastikan bahwa semua elemen yang dapat diciutkan di bawah induk yang ditentukan akan ditutup ketika salah satu item yang dapat diciutkan ditampilkan.
Contoh
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Perluas dan Perkecil Toggle Icon & Text
Contoh berikut mengubah teks dan ikon buka/tutup saat membuka dan menutup konten yang dapat diciutkan:
Contoh
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Atau Anda dapat menggunakan CSS:
Contoh
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}