Apa yang dimaksud dengan Collapsible ? Sebagian orang mungkin belum mengetahui elemen ini, karena memang jarang digunakan dan bukan hal yang wajib. Collapsible merupakan suatu bagian yang dapat di sembunyikan dan ditampilkan, umumnya dilakukan jika ingin membagi beberapa bagian konten ke dalam satu bidang yang dapat ditampilkan dan disembunyikan sehingga tidak memenuhi tampilan layar.
Collapsible tidak melulu harus dikelola oleh sebuah tombol, tapi bisa juga dikelola oleh teks, gambar, dll. Ketika tombol di klik, maka akan muncul sebuah konten, ketika tombol di klik akan kembali menyembunyikan konten, kira-kira seperti itu cara kerjanya Collapsible.
Basic Collapsible
<h2>Basic Collapsible Bootstrap - Posciety</h2> <p>Klik tombol di bawah ini untuk menampilkan & menyembunyikan sebuah paragraf.</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collpos">CLICK ME !</button> <div id="collpos" class="collapse"> 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. 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>
Kode ini merupakan struktur dasar Collapsible, kita gunakan div sebagai elemen untuk contoh seperti yang terlihat pada kode (yang merupakan pembungkus sebuah konten / isi yang akan ditampilkan / disembunyikan ketika tombol di klik). Jangan lupa berikan id, contoh: div id=”collpos” dan berikan class collapse.
Pada bagian tombol silahkan berikan data-target=”collpos” yang mana collpos ini merupakan id dari sebuah div, sehingga toggle button ini akan terhubung dengan id tersebut. Simpan dal lihat hasilnya !
Secara default, konten akan disembunyikan / hidden. Perlu mengklik tombol terlebih dahulu untuk menampilkan konten tersebut. Bagaimana jika ingin mengatur defaultnya menampilkan konten ? Cukup berikan class in setelah class collapse pada div konten, contoh:
<h2>Basic Collapsible Bootstrap - Posciety</h2> <p>Klik tombol di bawah ini untuk menampilkan & menyembunyikan sebuah paragraf.</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collpos">CLICK ME !</button> <div id="collpos" 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. 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>
Ini akan secara default menampilkan konten, sehingga ketika tombol di klik akan menyembunyikan konten. Simpan dan lihat hasilnya !
Tidak hanya tombol, jika kamu terpikirkan untuk menggunakan sebuah tag a sebagai pengganti tombol, jangan lupa berikan href=””. contoh: <a href="#collpos" data-toggle="collapse">Klik Disini Untuk Toggle</a> cara kerjanya akan tetap sama seperti di atas, namun tag a memang memerlukan href=”” agar dapat berfungsi. Pada href, masukkan id sebuah div yang berisi konten agar dapat terhubung.
Combine
Setelah mengetahu dasar-dasar pembuatan dan penggunaan Collapsible, kamu dapat mengeksplor dengan menampilkan elemen-elemen lain seperti Panel, List, dsb. Konten yang di show / hide tidak melulu harus text atau paragraf, kamu dapat menampilkan Panel, List, dan elemen-elemen lainnya.
Collpasible juga merupakan dasar dari pembuatan Accordion di Bootstrap, perlu menekan sebuah elemen baik itu tombol atau text untuk membuka dan menutup Accordion.