Cara Mudah Membuat Bootstrap Collapse

Sudahkah kita mengetahui dan memahami sekaligus menggunakan Bootstrap Collapse dalam keseharian kita saat membuat design web ataupun mengedit template. Menu dengan sebutan collapse sebenernya mampu membuat halaman web terlihat rapi dan tidak memakan tempat.

Collapse dapat digunakan dengan elemen <button> maupun elemen <a>. Sebagai contoh pertama akan menggunakan elemen <button>.

Button Collapse

Sebagai conotoh dibawah ini, anda dapat menekan tombol dibawah ini untuk melihat hasilnya.

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.

Kode HTML

<button class="btn btn-success" data-target="#button-collapse" data-toggle="collapse" type="button">Pencet Tombol</button>
<div class="collapse" id="button-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.
</div>

Penjelasan

Perli kita ketahui dari kode diatas, bahwa attribute pada elemen <button> data-target="#button-collapse" berfungsi sebagai eksekusi yang akan memanggil data pada elemen <div>. Sedangkan attribute data-toggle="collapse" untuk memanggil elemen <div> dengan class .collapse maka alhasil akan membuka dan menutup konten yang ada didalamnya.

Untuk penggunaan dengan elemen <a> dapat dilakukan dengan menggunakan href sebagai ganti dari data-target, contoh

Pencet Tombol dengan elemen a

Kode HTML

<a class="btn btn-success" data-toggle="collapse" href="#button-collapse-a">Pencet Tombol dengan elemen a</a>
<div class="collapse" id="button-collapse-a">
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>

Secara default konten didalam menu collapse tersembunyi/hidden, namun agar bisa membuka secara otomatis kita perlu menambahkan class .in pada elemen <div>, contoh

Sudah Terbuka isinya

Collaspe dapat juga dibuat dengan menggunakan panels yang pernah dibahas kemarin, sebagai contoh dengan menggunakan panels.

Judul Panels Collapse

isi konten dalam menu panel collapse

Kode HTML

<div class="panel-group">
  <div class="panel panel-success">
     <div class="panel-heading">
        <h4 class="panel-title">
           <a data-toggle="collapse" href="#panel-test">Judul Panels Collapse</a>
        </h4>
     </div>
     <div class="panel-collapse collapse" id="panel-test">
         <div class="panel-body">
            isi konten dalam menu panel collapse</div>
         </div>
     </div>
<</div>
</div>

Selesai diatahap akhir, dan sudah dapat diimplementasikan untuk percobaan...... semoga berhasil dan bermanfaat dalam percobaannya :)