Home » How To » Cara Membuat Collapse

Cara Membuat Collapse

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat collapse section. Collapse merupakan sebuah fungsi dari bootstrap yang dapat digunakan untuk menampilkan dan menyembunyikan suatu konten(toggle). Collapse ini memiliki sebuah tombol atau button yang dapat memicu untuk menampilkan atau menyembunyikan konten tersebut.

Collapsible

Klik tombol untuk beralih antara menampilkan dan menyembunyikan konten yang bisa diciutkan.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #FF0000;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Contoh Collapse</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible">Buka collapse</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>

<p>Collapsible Set:</p>
<button type="button" class="collapsible">Open Section 1</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
 <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Membuat Collapse

Langkah 1) Tambahkan HTML:
Contoh

<button type="button" class="collapsible">Buka</button>
<div class="content">
  <p>Hello Semua!</p>
</div>

Langkah 2) Tambahkan CSS:
Tata akordeon:
Contoh

/* Style tombol yang digunakan untuk membuka dan menutup konten yang bisa diciutkan */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Tambahkan warna background ke button jika diklik (tambahkan kelas .active dengan JS), dan saat akan menggerakkan mouse di atasnya (arahkan kursor) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Atur gaya konten yang dapat melakukan collapse. Catatan: disembunyikan secara default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Langkah 3) Tambahkan JavaScript:
Contoh

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Animasi Collapse (Slide Down)

Untuk membuat animasi yang dapat diciutkan, tambahkan max-height: 0, overflow: hidden dan transition untuk properti max-height, ke kelas panel.

Kemudian, gunakan JavaScript untuk melakukan slide down konten ke bawah dengan menyetel max-height yang dihitung, bergantung dengan tinggi panel yang ada pada ukuran layar yang berbeda:
Contoh

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

Jadi, begini hasilnya :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #FFFF00	;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>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.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

Tambahkan Ikon

Tambahkan simbol ke setiap tombol untuk menunjukkan apakah konten yang bisa diciutkan itu terbuka atau tertutup:
Contoh

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

Jadi akan begini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #87CEEB;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Hello Semua!!!
    Ini merupakan contoh dari collapse yang berfungsi untuk menampilkan dan menyebunyikan suatu konten pada halaman web.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

You may also like