Tutorial Bootstrap 4 #18 : Collapse Bootstrap 4

Collapse Bootstrap 4 – Collapse pada bootstrap digunakan untuk menampilkan dan menyembunyikan suatu konten (Toggle).

Komponen collapse ini memiliki sebuah tombol yang bertugas sebagai pemicu suatu konten disembunyikan atau ditampilkan.

Bootstrap telah menyediakan fitur ini, terkadang pada saat membuat sebuah website atau aplikasi, tentu terkadang kita ingin membuat sebuah informasi yang bisa di tampilkan dan disembunyikan kembali, hanya dengan cara melakukan klik pada sebuah tombo.

Jadi pada tutorial ini kita akan belajar bagaimana cara penggunaan dari komponen collapse dari bootstrap 4 ini.

Collapse Bootstrap 4

Komponen collapse bootstrap menggunakan bantuan javascript untuk membuat efek hide dan show.

Jika teman-teman pernah membaca tutorial jquery di malasngoding.com, tentu teman-teman tidak akan asing lagi dengan yang namanya efek, dan pasti sudah mengerti tentang cara kerja javascript untuk membuat efek toggle.

Baca :

• Belajar Membuat Efek Toggle Dengan Jquery

Collapse Toggle Bootstrap 4

Dengan menggunakan bootstrap, kita tidak perlu lagi menggunakan javascript atau jquery untuk membuat efek toggle, karena bootstrap sudah menyediakan class yang siap pakai.

Perhatikan contoh cara membuat efek toggle menggunakan bootstrap berikut.

Perhatikan pada contoh di atas,terdapat sebuah tombol dengan text “KLIK SAYA“. dan terdapat sebuah card sederhana. yang bertugas sebagai pemicu di sini adalah tombol. sedangkan card di atas adalah konten atau elemen yang akan disembunyikan atau ditampilkan (toggle).

Pembuatan collapse diawali dengan menulis atribut data-toggle=”collapse” pada elemen tombol, kemudian pada property data-target=”” isi dengan id element yang akan di toggle.

Pada contoh ini kita membuat elemen yang akan ditoggle kita beri id collapseMalasngoding.

Sehingga data-target=”” pada tombol akan menjadi data-target=”#collapseMalasngoding”. kemudian buat id yang akan di toggle. buat class collapse juga pada elemen tersebut.

Jika kita jalankan maka hasilnya akan seperti berikut.

collapse bootstrap 4

Seperti yang terlihat pada contoh di atas, jika kita klik pada tombol, maka konten card yang secara defaultnya disembunyikan, menjadi tampil, kemudian jika diklik lagi, maka konten tersebut disembunyikan lagi.

Berikut contoh full source code nya,

collapse.html

Penjelasan

Teman-teman hanya perlu fokus pada penamaan id pada konten atau elemen yang akan diberikan efek toggle. kemudian pada atribut data-target=”” tombol, tuliskan nama id yang ingin diberi toggle tadi, misalnya data-target=”#collapseMalasngoding”.

Dan jangan lupa untuk menuliskan class .collapse pada konten yang ingin diberi efek toggle seperti contoh di atas.

Untuk penggunaannya sendiri bebas, teman-teman bisa menerapkannya pada komponen bootstrap apa saja.

Download Source Code

DEMO