Collapse Bootstrap: Bootstrap Tutorial #20

Pada tutorial kali ini kita masih membahas mengenai suatu komponen bootstrap lagi, yaitu Collapse. Collapse merupakan komponen bootstrap yang digunakan untuk menyembunyikan dan menampilkan suatu konten baik dalam jumlah konten yang besar atau konten yang kecil.

Langsung kita mulai:

Section Artikel

1 Dasar Colapse bootstrap
2 Multiple Collapse Bootstrap
3 Collapse + List Group
4 Accordion

Dasar Colapse bootstrap

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Simple Collapsible</h2>
    <p>Klik untuk menyembunyikan atau menampilkan konten.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
    <div id="demo" class="collapse">
      Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). 
    </div>
  </div>

  </body>
</html>

Penjelasan:

Elemen dengan Class .collapse menunjukan bahwa elemen tersebut dapat disembunyikan atau ditampilkan. Dalam contoh diatas dengan men-klik button kita dapat menampilkan atau menyembunyikan nya.
Class .collapse dapat ditempat kan dalam berbagai element seperti tag div, image, paragraf dan lainnya
Untuk mengontrol collapse ini (menyembunyikan dan menampilkan) konten tambahkan atribut data-toggle=”collapse” ke dalam tag <a> atau <button>, kemudian tambahakan atribut data-target="#demo" yang akan mengarahkan button ke elemen yang memiliki id=”demo”.
Selain menggunakan tag button juga dapat menggunakan <a> sebagai pengganti.

contohnya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible dengan tag "a"</h2>
  <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
      Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). 
  </div>
</div>

</body>
</html>

Secara default collapse akan tersembunyi sampai ada aksi (klik button) dari user, tetapi hal ini dapat kita atur dengan menambahkan class .in setelah class .collapse untuk menampilkan terlebih dahulu konten lali ketik ingin menyembunyikannya maka tinggal men klik button.

contohnya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse in">
      Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). 
  </div>
</div>
    
</body>
</html>

Multiple Collapse Bootstrap

Kita juga dapat membuat banyak button dengan fungsi collapse bootstrap didalamnya. Untuk melakukan hal ini kita hanya perlu mengatur href (jika menggunakan tag <a> ) dan data-target (jika menggunakan button) saja agar mengarah ke elemen dengan id yang sama.

Kita juga dapat menambahkan class .multi-collapse untuk menampilkan isi dari dua collapse secara berurutan dalam satu button.

contohnya :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>

    <div class="container">
      <p>
      <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    </p>
      
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
          <div class="card card-body">
	Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). 
          </div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
          <div class="card card-body">
             Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik.
          </div>
        </div>
      </div>
    </div>
    </div>

  </body>
</html>

Collapse + List Group

Untuk teman teman yang belum mengetahui mengenai List group bisa membaca nya terlebih dahulu di List Group Bootstrap: Bootstrap Tutorial #18. Komponen bootstrap collapse ini juga dapat kita padukan dengan List group, jadi saat kita melakukan klik maka akan muncul list group didalamnya. Saya yakin teman-teman sudah sering melihat hal ini.

contohnya :

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Collapsible List Group</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Klik untuk melihat list</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">Satu</li>
          <li class="list-group-item">Dua</li>
          <li class="list-group-item">Tiga</li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>

Pada dasarnya kita hanya memasukkan collapse kedalam list-group dengan isi dari collapse adalah item dari list group sendiri.

Accordion

Accordion dibuat dengan menggabungkan komponen yaitu collapse dan data panel. ada satu class yang ditambahkan yaitu class .data-parent yang digunakan untuk memastikan bahwa semua elemen yang bisa disembunyikan dibawah elemen induk yang sama, ini untuk memastikan bahwa item yang tampil akan bergantian.

Contohnya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contoh Accordion</h2>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body"> Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body"> Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik..</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body"> Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik..</div>
      </div>
    </div>
  </div> 
</div>
    
</body>
</html>

Yang paling penting mengenai komponen collapse adalah kita harus paham mengenai class dan id. Class dipanggil dengan awalan tanda titik dan id dipanggil dengan awalan tanda #. Kemudian kita juga harus paham mengenai fungsi data-target dan data-toggle, yang telah saya jelaskan diatas.

Jika hal – hal diatas sudah dipahami maka akan memudahkan dalam pembuatan collapse.

Sekian penjelasan mengenai komponen collapse pada bootstrap, teman teman dapat kembangkan dengan menambahkan gambar atau hal lainnya. Terimakasih.

Collapse Bootstrap: Bootstrap Tutorial #20

Dasar Colapse bootstrap

Multiple Collapse Bootstrap

Collapse + List Group

Accordion

Kelebihan dan Kekurangan Marketplace Serta Contohnya

10 Algoritma Machine Learning Terbaik

You may also like