Cara Membuat Collapse atau Konten yang Dapat di Lipat

September 19, 2023

www.gurudzgn.com - Hi web Developer! Kembali lagi bersama dengan guru design, kali ini kita akan membuat tutorial Bagaimana cara membuat collapse atau tombol yang bisa menyembunyikan konten kita jadi saat ditampilkan pertama kali hanyalah judul atau headernya kemudian jika di klik maka isi dari konten tersebut akan muncul, begitulah kira-kira fungsinya.

Cara Membuat Collapse

Kalian pasti sudah mengetahui Apa itu collapse, adalah untuk menyebutkan dan melebarkan konten jadi misalnya kita tidak ingin melihat konten terlalu banyak atau ribet maka kita membutuhkan fungsi ini untuk menciutkan konten tersebut, jadi yang akan tampil hanyalah judulnya saja adapun isi dari konten tersebut akan diikutkan atau disembunyikan untuk sementara.

Begini cara membuat collapse hanya menggunakan CSS dan JavaScript

Berhubung kita akan membuatnya hanya dengan CSS dan JavaScript jadi dapat dipastikan fungsi ini akan berjalan dengan lancar dan enteng, baik lanjut ke tutorial:

1. Siapkan proyek kerja anda

Buka Project anda, baik itu menggunakan CMS blogger, Wordpress ataupun Project Anda yang lainnya.

2. Tambahkan CSS

Lalu tambahkan style CSS berikut ini dalam Project anda:

.header-collapse {
  background-color: #f2f2f2;
  cursor: pointer;
  margin-bottom:5px;
  position: relative;
  overflow: hidden;
  border-radius:20px;
}

.header-collapse h3 {
  margin: 0 0 0 10px!important;
  padding:10px 20px 10px 10px!important;
  font-size:14px!important;
}

.collapse-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: max-height 0.3s ease-out;
}

3. Tambahkan JavaScript

Tidak lengkap jika kita tidak menambahkan Java script pada Project web kita, karena CSS tanpa Java Script bagaikan Malam Tak Berbintang hehe.

<script>
        function toggleCollapse(id) {
    var element = document.getElementById(id);
    if (element.style.maxHeight === "0px" || element.style.maxHeight === "") {
        element.style.maxHeight = element.scrollHeight + "px";
    } else {
        element.style.maxHeight = "0px";
    }
}

    </script>

4. Tambah HTML

Terakhir adalah menambahkan element HTML

<div class="header-collapse" onclick="toggleCollapse('collapse1')">
    <h3>Pilihan 1</h3>
</div>
<div class="collapse-body" id="collapse1">
    <!--Isi konten disini-->
</div>

<div class="header-collapse" onclick="toggleCollapse('collapse2')">
    <h3>Pilihan 2</h3>
</div>
<div class="collapse-body" id="collapse2">
    <!--Isi konten disini-->
</div>

<div class="header-collapse" onclick="toggleCollapse('collapse3')">
    <h3>Pilihan 3</h3>
</div>
<div class="collapse-body" id="collapse3">
    <!--Isi konten disini-->
</div>

Pada contoh di atas Saya hanya membuat tiga buah collapse, Jika anda ingin menambahkan collapse banyak misal 10 atau 20 atau 100 bahkan 1000 juga bisa, anda tinggal mengubah id-nya saja jadi seperti ini: collapse1, collapse2, collapse3, collapse4, collapse5 dan seterusnya.
Dan jangan lupa pada header ada fungsi onclick di situ dirubah juga sesuaikan dengan nama id-nya jangan sampai tertukar ya.

Untuk melihat demonya bisa Klik tombol di bawah ya

Demo

Terima kasih sudah berkunjung dan semoga apa yang anda cari bisa ketemu dan apa yang Anda susahkan bisa dimudahkan terima kasih.

Guru Design