Tutorial Belajar Bootstrap 4 Part 17 – Membuat Collapse dengan Bootstrap

Selamat datang di tutorial warung belajar, masih dalam seri tutorial bootstrap 4, jika dalam tutorial sebelumnya kita telah belajar mengenai cara membuat menu dropdown, dalam tutorial kali ini kita akan membahas mengenai cara membuat collapse dengan bootstrap.

Collapse adalah fitur yang digunakan untuk menyembunyikan dan menampilkan sebuah konten dengan cara melakukan klik pada sebuah tombol, jadi jika ada sebuah content dengan ukuran besar anda dapat memanfaatkan fitur collapse ini, sehingga tombol di klik dulu baru content akan ditampilkan, baik mari kita mulai saja pembahasannya.

Cara Membuat Collapse sederhana

Baik langsung saja kita membuat contoh dari penggunaan fitur collapse, perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama collapse_bootstap.html, lalu kita buka buka di browser maka hasilnya sebagai berikut :

Keterangan :

• Untuk membuat collapse anda bisa membuat tombol dengan menggunakan tag <a> didalamnya silahkan tambahkan attribute href dengan value id dari content yang ingin ditampilkan ketika tombol di klik, dalam contoh ini idnya adalah kotak, jadi value dari attribute href adalah #kotak, karena valuenya adalah ID karena itu kita perlu menambahkan tanda # diawal dari ID, seperti pada line 14
• pada tag <a> tambahkan attribute data-toggle dan tambahkan value collapse, seperti pada line 14
• buatlah content dengan menggunakan tag <div> seperti pada line 15, lalu tambahkan id dengan value yang sama dengan value attribute href pada tag <a>, dalam contoh ini adalah kotak, lalu anda tambahkan class collapse

Membuat Multi Collapse

Jika dibagian sebelumnya kita sudah membahas mengenai collapse, nah kali ini kita akan belajar untuk membuat multi collapse, arti multi collapse disini adalah dengan menggunakan 1 tombol kita bisa menampilkan/menyembunyikan beberapa content sekaligus.

Untuk contohnya perhatikan skrip dibawah ini :

Semisal ini kita simpan dengan nama multi_collapse.html, maka hasilnya adalah sebagai berikut :

Keterangan :

• pada line 14 dan line 15, terdapat link dengan attribute data-toogle dengan value collapse, serta attribute href dengan value id masing – masing content, cara ini sama seperti pada bagian sebelumnnya
• pada line 16 kita buat tombol dengan attribute data-toogle dan valuenya collapse, lalu kita berikan attribute data-target dengan value .multi-collapse, value ini bisa diartikan sebagai class multi-collapse, dan nantinya class multi-collapse akan kita sertakan pada seluruh objek yang ingin dapat diatur oleh tombol ini.
• perhatikan pada line 20, dan 27 , pada tag <div> di 2 objek yang berbeda kita tambahkan class .multi-collapse agar tombol “Content 1 & 2” dapat mengatur tampilan dari 2 objek yang ada
• anda juga harus mengatur id dari masing – masing objek, agar dapat di atur dari masing – masing tombol, dalam contoh ini objek pertama menggunakan ID multiCollapseExample1 pada line 20, dan objek kedua menggunakan ID multiCollapseExample2 pada line 27

Cara Membuat Accordion dengan bootstrap

Accordion memiliki konsep yang sama dengan collapse, sama sama digunakan untuk menampilkan dan menyembunyikan konten dengan bantuan tombol, hanya saja tampilannya berbeda, nah sebagai contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama accordion_bootstrap.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• untuk membuat accordion anda harus membuat tag <div> dan tambahkan class accordion, coba perhatikan di line 13
• setelah itu silahkan buat beberapa objek yang nanti akan dijadikan bagian dari accordion, kita memanfaatkan card untuk membuat objeknya, jika anda belum mengetahui apa itu card silahkan lihat tutorial sebelumnya membuat card (panel) dengan bootstrap
• Contohnya kita buat 3 bagian accordion, bagian pertama dari mulai line 15 – 26, bagian kedua di line 28 – 39, bagian ketiga di line 41 – 52
• masing – masing bagian kita beri sebuah tag <a> yang digunakan untuk membuka bagian accordionya, pada link tersebut ada attribute data-toogle dengan value collapse, berikutnya buat attribute data-parent dengan value #accordion, value ini samakan dengan id dari parent yang ada pada line 13
• Berikutnya tambahkan attribute href dengan value id dari bagian yang ingin ditampilkan, contohnya untuk line 17 value dari attribute href adalah #collapseOne, maka pada bagian content kita beri id yang sama perhatikan pada line 21 objek ini juga memberikan id collapseOne.
• Lalu hal yang sama untuk beberapa objek yang lain dengan settingan yang menyesuaikan

Nah kurang lebih seperti itu teman – teman  pembahasan mengenai cara membuat collapse dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial bootstrap selanjutnya.