JS Collapse (collapse.js)
Dapatkan gaya dasar dan dukungan yang fleksibel untuk komponen dilipat seperti akordeon dan navigasi.
ketergantungan Plugin: Collapse membutuhkan transisi plugin untuk dimasukkan dalam versi Bootstrap.
Untuk tutorial tentang Collapsibles, baca Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Kelas | Deskripsi | Contoh |
|---|---|---|
| .collapse | Menyembunyikan konten | Cobalah |
| .collapse in | Menunjukkan konten | Cobalah |
| .collapsing | Ditambahkan ketika transisi dimulai, dan dihapus ketika selesai | Cobalah |
Via data-* Atribut
Hanya menambahkan data-toggle="collapse" dan data-target untuk elemen untuk secara otomatis menetapkan kontrol dari elemen dilipat. Atribut data sasaran menerima pemilih CSS untuk menerapkan keruntuhan untuk. Pastikan untuk menambahkan runtuhnya kelas untuk elemen dilipat. Jika Anda ingin ke default terbuka, menambahkan kelas tambahan di.
Contoh
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Cobalah sendiri " Tip: Untuk menambahkan manajemen kelompok akordeon-seperti untuk kontrol dilipat, menambahkan data atribut data-parent="#selector" .
via JavaScript
Aktifkan manual dengan:
$('.collapse').collapse()Collapse Pilihan
Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data-, seperti dalam data-parent="" .
| Nama | Mengetik | kegagalan | Deskripsi |
|---|---|---|---|
| parent | selector | false | Semua elemen dilipat di bawah induk ditentukan akan ditutup ketika item dilipat ini ditampilkan. (Mirip dengan perilaku akordeon tradisional - ini adalah tergantung pada kelas panel) - Lihat contoh di bawah ini |
| toggle | boolean | true | Matikan elemen dilipat pada doa |
Metode Collapse
Tabel berikut berisi metode runtuhnya semua tersedia.
| metode | Deskripsi | Cobalah |
|---|---|---|
| .collapse( options ) | Mengaktifkan elemen dilipat dengan opsi. Lihat pilihan di atas nilai-nilai yang valid | |
| .collapse("toggle") | Matikan elemen dilipat | Cobalah |
| .collapse("show") | Menunjukkan elemen dilipat | Cobalah |
| .collapse("hide") | Menyembunyikan elemen dilipat | Cobalah |
Collapse Acara
Tabel berikut berisi peristiwa runtuhnya semua tersedia.
| Peristiwa | Deskripsi | Cobalah |
|---|---|---|
| show.bs.collapse | Terjadi ketika elemen dilipat akan segera ditampilkan | Cobalah |
| shown.bs.collapse | Terjadi ketika elemen dilipat sepenuhnya ditampilkan (setelah transisi CSS telah selesai) | Cobalah |
| hide.bs.collapse | Terjadi ketika elemen dilipat adalah untuk disembunyikan | Cobalah |
| hidden.bs.collapse | Terjadi ketika elemen dilipat sepenuhnya tersembunyi (setelah transisi CSS telah selesai) | Cobalah |
contoh
sederhana dilipat
Contoh berikut membuat sebuah tombol mengaktifkan memperluas dan runtuh kandungan unsur 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> Cobalah sendiri " Panel dilipat
Contoh berikut menunjukkan panel 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> Cobalah sendiri " Dilipat Daftar Grup
Berikut ini menunjukkan sebuah panel dilipat dengan kelompok di dalam daftar:
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> Cobalah sendiri " Akordeon
Contoh berikut menunjukkan akordeon sederhana dengan memperluas komponen panel:
Catatan: data-parent atribut memastikan bahwa semua elemen dilipat di bawah induk ditentukan akan ditutup ketika salah satu item dilipat 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> Cobalah sendiri " Memperluas dan Perkecil Beralih Icon & Text
Contoh berikut mengubah terbuka / teks dekat dan ikon saat membuka dan menutup konten dilipat:
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');
});
}); Cobalah sendiri " 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";
} Cobalah sendiri "