Bootstrap 3 Collapse - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Collapse

TrikSonic - Bootstrap Collapse merupakan Metode yang digunakan untuk menampilkan dan menyembunyikan konten secara flexsibel yang dipicu oleh user, biasanya pemicunya adalah metode klik pada element.

Catatan : Penggunaan jQuery dan Bootstrap JavaScript diperlukan untuk metode ini.

Dasar Penggunaan Collapse

Dasar penggunaan Collapse adalah sebagai berikut :

1. Element pemicu : gunakan Attribute data-toggle="collapse" dan Attribute data-target="#elementID"
   • data-toggle="collapse" : bersifat Wajib dituliskan
   • data-target="#elementID" : tanda yang berstabilo menyesuaikan dangan Attribute ID dari target Collapse
2. Element Target : element target collapse harus mempunyai attribute ID beserta dengan nilai valuenya, nilai dari value ini akan menjadi patokan pada element pemicu, serta tambahkan class .collapse sebagai class dasarnya

Contoh :

<button class="btn btn-primary" data-toggle="collapse" data-target="#mydiv">Collapse</button>

<div id="mydiv" class="collapse">
Lorem ipsum dolor sit amet,
rebum doctus vivendo no vel,
ferri diceret eu eam,
ea melius aperiam ponderum duo.
</div>

Collapse dengan element HTML <a>

Untuk menjalankan efek collapse dengan menggunakan element HTML <a> sebagai pemicu ada 2 cara :

1. Cara pertama : Cukup menggunakan attribute href yang berisi nilai ID target
2. Cara Kedua dengan tetap menggunakan attribute data-target="#elementID"

Contoh :

<a href="#mydiv" class="btn btn-primary" data-toggle="collapse">
Collapse 1
</a>

<a href="javascript:void(0);" class="btn btn-info" data-toggle="collapse" data-target="#mydiv2">
Collapse 2
</a>

<div id="mydiv" class="collapse">
<strong>Collapse 1</strong> - Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>

<div id="mydiv2" class="collapse">
<strong>Collapse 2</strong> - Lorem ipsum dolor sit amet, 
rebum doctus vivendo no vel, 
ferri diceret eu eam, 
ea melius aperiam ponderum duo.
</div>

Collapse in

Sebuah metode yang digunakan untuk menampilkan target collapse pada saat pertama kalinya.

Secara default class .collapse memiliki tampilan tidak terlihat, untuk menampilkannya gunakan class .in dan letakkan setelah class dasar .collapse

Contoh :

<button class="btn btn-default" data-toggle="collapse" data-target="#mydiv">Collapse</button>

<div id="mydiv" class="collapse in">
Lorem ipsum dolor sit amet,
rebum doctus vivendo no vel,
ferri diceret eu eam,
ea melius aperiam ponderum duo.
</div>

Collapse pada sebuah Panel

Metode yang digunakan untuk meciptakan efek collapse pada sebuah Panel.

Contoh :

<div class="panel panel-default">
  <div class="panel-heading">
    <a class="panel-title" data-toggle="collapse" href="#mydiv">Collapse Panel</a>
  </div>
  <div id="mydiv" class="collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

Bootstrap Accordion

Bootstrap Accordion merupakan metode yang digunakan untuk menampilkan dan menghilangkan sebuah element secara bergantian dan dinamis, maksudnya jika salah satu element terpicu untuk ditampilkan, maka element yang lainnya akan terotomatis akan menghilang atau tersimpan.

Untuk menerapkannya tambahkan attribute data-parent="#elementID" pada element pemicu.

Tanda yang berstabilo diatas merupakan nilai attribute ID dari element pembungkus utama, sesuaikan dengan ID yang digunakan

Contoh :

<div class="panel-group" id="mycontainer">

  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-1">Panel 1</a>
    </div>
    <div id="panel-1" class="collapse">
      <div class="panel-body">Konten panel 1</div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-2">Panel 2</a>
    </div>
    <div id="panel-2" class="collapse in">
      <div class="panel-body">Konten panel 2</div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <a data-toggle="collapse" data-parent="#mycontainer" href="#panel-3">Panel 3</a>
    </div>
    <div id="panel-3" class="collapse">
      <div class="panel-body">Konten panel 3</div>
    </div>
  </div>
  
</div>