Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

Bootstrap 3 Collapse - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Collapse

TrikSonic - Bootstrap Collapse merupakan Metode yang dipakai untuk menampilkan dan menyembunyikan konten secara flexsibel yang dipicu oleh user, biasanya pemicunya ialah metode klik pada element.
Catatan : Penggunaan jQuery dan Bootstrap JavaScript dibutuhkan untuk metode ini.

Dasar Penggunaan Collapse

Dasar penggunaan Collapse ialah 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 sasaran Collapse
  2. Element Target : element sasaran 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body>  <h2>Bootstrap 3 Collapse</h2>   <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Collapse dengan element HTML <a>

Untuk menjalankan dampak collapse dengan memakai element HTML <a> sebagai pemicu ada 2 cara :
  1. Cara pertama : Cukup memakai attribute href yang berisi nilai ID target
  2. Cara Kedua dengan tetap memakai 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <h2>Bootstrap 3 Collapse</h2>  <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Collapse in

Sebuah metode yang dipakai untuk menampilkan sasaran collapse pada dikala pertama kalinya.
Secara default class .collapse mempunyai tampilan tidak terlihat, untuk menampilkannya gunakan class .in dan letakkan sesudah 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <h2>Bootstrap 3 Collapse In</h2>  <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Collapse pada sebuah Panel

Metode yang dipakai untuk meciptakan dampak 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <h2>Bootstrap 3 Collapse Panel</h2>  <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>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Bootstrap Accordion

Bootstrap Accordion merupakan metode yang dipakai untuk menampilkan dan menghilangkan sebuah element secara bergantian dan dinamis, maksudnya kalau 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <h2>Bootstrap 3 Acordeon</h2>  <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>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>