Membuat Interaksi Dinamis dengan JavaScript (Show/Hide & Toggle Class)

Interaksi dinamis adalah kemampuan halaman web untuk merespons tindakan pengguna secara langsung tanpa perlu memuat ulang halaman. Untuk itu pelajari sampai tuntas di tutorial kali ini tentang Interaksi Dinamis dengan JavaScript (Show/Hide & Toggle Class).

Contohnya:

• Tombol “Tampilkan Detail” yang bisa menyembunyikan atau menampilkan informasi,

• Menu navigasi yang bisa collapse/expand,

• Elemen yang berubah gaya (warna, ukuran, animasi) ketika diklik.

JavaScript menyediakan cara mudah untuk melakukan ini, yaitu dengan:

1. Show / Hide Element (menampilkan & menyembunyikan elemen)

2. Toggle Class (menambah atau menghapus kelas CSS secara dinamis)

1. Menampilkan & Menyembunyikan Elemen (Show/Hide)

Kamu bisa mengatur visibilitas elemen dengan properti style.display di JavaScript.

Contoh: Tombol “Tampilkan Detail”

<button id="tombolDetail">Tampilkan Detail</button>
<p id="detail" style="display:none;">
  Ini adalah informasi detail produk yang bisa ditampilkan atau disembunyikan.
</p>

<script>
let tombol = document.getElementById("tombolDetail");
let detail = document.getElementById("detail");

tombol.addEventListener("click", function() {
  if (detail.style.display === "none") {
    detail.style.display = "block";
    tombol.innerText = "Sembunyikan Detail";
  } else {
    detail.style.display = "none";
    tombol.innerText = "Tampilkan Detail";
  }
});
</script>

Penjelasan:

• Saat tombol diklik, JavaScript memeriksa apakah elemen detail sedang disembunyikan (display: none).

• Jika ya, tampilkan (display: block) dan ubah teks tombol.

• Jika tidak, sembunyikan lagi.

Hasil: Tombol bisa berganti fungsi otomatis antara menampilkan dan menyembunyikan konten.

2. Menggunakan classList.toggle() untuk Efek Interaktif

Selain show/hide manual, kamu bisa menambahkan dan menghapus kelas CSS secara dinamis.
Cara ini lebih rapi karena logika tampilannya diatur lewat CSS, bukan langsung di JavaScript.

Contoh: Mengubah Warna Box Saat Diklik

<style>
.box {
  width: 150px;
  height: 150px;
  background: gray;
  transition: 0.3s;
}
.active {
  background: green;
  transform: scale(1.1);
}
</style>

<div class="box" id="box"></div>

<script>
let box = document.getElementById("box");

box.addEventListener("click", function() {
  box.classList.toggle("active");
});
</script>

Penjelasan:

• Saat box diklik, classList.toggle("active") menambahkan kelas “active” jika belum ada, atau menghapusnya jika sudah ada.

• Perubahan tampilan dikontrol oleh CSS (lebih mudah diatur & bisa ditambah animasi).

3. Studi Kasus: Menu Navigasi Collapse

Fitur ini sering digunakan di navbar responsif, terutama di versi mobile.

<style>
.navbar {
  background: #333;
  color: white;
  padding: 10px;
}
.menu {
  display: none;
  list-style: none;
  padding: 0;
}
.menu.show {
  display: block;
}
.menu li {
  padding: 8px;
}
.tombol-menu {
  background: #555;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

<div class="navbar">
  <button class="tombol-menu" id="tombolMenu">☰ Menu</button>
  <ul class="menu" id="menuNavigasi">
    <li>Beranda</li>
    <li>Tentang</li>
    <li>Kontak</li>
  </ul>
</div>

<script>
let tombolMenu = document.getElementById("tombolMenu");
let menuNavigasi = document.getElementById("menuNavigasi");

tombolMenu.addEventListener("click", function() {
  menuNavigasi.classList.toggle("show");
});
</script>

Penjelasan:

• Saat tombol diklik, kelas .show ditambahkan atau dihapus dari menu.

• CSS menentukan kapan menu tampil (display: block) atau disembunyikan (display: none).

Cocok untuk:

• Navigasi pada versi mobile

• Sidebar dinamis

• Dropdown menu

4. Studi Kasus Tambahan: Tombol Mode Gelap (Dark Mode Toggle)

<style>
body {
  background: white;
  color: black;
  transition: 0.3s;
}
.dark-mode {
  background: #121212;
  color: white;
}
</style>

<button id="modeBtn"> Ubah ke Dark Mode</button>

<script>
let btn = document.getElementById("modeBtn");

btn.addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");

  if (document.body.classList.contains("dark-mode")) {
    btn.innerText = "☀️ Ubah ke Light Mode";
  } else {
    btn.innerText = " Ubah ke Dark Mode";
  }
});
</script>

Penjelasan:

• classList.toggle() menambahkan atau menghapus kelas dark-mode.

• Teks tombol berubah otomatis sesuai mode aktif.

• Semua perubahan gaya diatur lewat CSS.

Kesimpulan

Dengan memanfaatkan show/hide dan toggle class, kamu bisa membuat website:

• Lebih interaktif dan modern,

• Memiliki navigasi dinamis,

• Mendukung fitur seperti dark mode, accordion, atau dropdown menu.

Inti tekniknya:

• Gunakan style.display untuk kontrol cepat (show/hide).

• Gunakan classList.toggle() untuk perubahan gaya berbasis CSS yang lebih fleksibel.