Bab 8: Show, Hide, dan Toggle jQuery – Membuat Elemen HTML Muncul dan Menghilang dengan Mudah

Bab 8: Show, Hide, dan Toggle jQuery – Membuat Elemen HTML Muncul dan Menghilang dengan Mudah

Setelah mempelajari Event Handling jQuery, selanjutnya adalah efek interaktif dasar yaitu Show, Hide, dan Toggle. Efek ini memungkinkan elemen HTML muncul, hilang, atau berganti-ganti secara dinamis saat pengguna melakukan aksi tertentu.

Fitur ini sangat berguna untuk membuat:

  • Menu dropdown
  • Panel informasi
  • Pop-up atau notifikasi
  • Interaksi konten dinamis

1. Menyembunyikan Elemen dengan .hide()

Method .hide() digunakan untuk menyembunyikan elemen dengan cepat.

Contoh:

$("#btnSembunyi").click(function(){
  $("#kotak").hide();
});

Elemen dengan id kotak akan menghilang saat tombol diklik.

2. Menampilkan Elemen dengan .show()

Method .show() digunakan untuk menampilkan elemen yang sebelumnya tersembunyi.

Contoh:

$("#btnTampil").click(function(){
  $("#kotak").show();
});

3. Toggle Elemen dengan .toggle()

Method .toggle() digunakan untuk berganti-ganti antara tampil dan sembunyi.

Contoh:

$("#btnToggle").click(function(){
  $("#kotak").toggle();
});

Jika kotak terlihat, .toggle() akan menyembunyikannya, dan sebaliknya.

4. Menambahkan Efek Animasi

jQuery memungkinkan penambahan durasi efek untuk transisi lebih halus.

Contoh .hide() dan .show() dengan durasi:

$("#kotak").hide(1000); // sembunyi dalam 1 detik
$("#kotak").show(1000); // tampil dalam 1 detik

Contoh .toggle() dengan durasi:

$("#kotak").toggle(500); // toggle dengan animasi 0,5 detik

5. Contoh Lengkap Show, Hide, dan Toggle jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Show, Hide, Toggle jQuery</title>
  <style>
    #kotak {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>

<div id="kotak">Kotak</div>
<button id="btnSembunyi">Sembunyikan</button>
<button id="btnTampil">Tampilkan</button>
<button id="btnToggle">Toggle</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#btnSembunyi").click(function(){
    $("#kotak").hide(1000);
  });

  $("#btnTampil").click(function(){
    $("#kotak").show(1000);
  });

  $("#btnToggle").click(function(){
    $("#kotak").toggle(500);
  });
</script>

</body>
</html>

6. Tips dan Kesalahan Umum

  • ❌ Memanggil .show() pada elemen yang sudah terlihat
  • ❌ Memanggil .hide() pada elemen yang sudah tersembunyi
  • ❌ Tidak menambahkan durasi jika ingin efek animasi halus
  • ❌ Lupa menempatkan jQuery di dalam $(document).ready()

Kesimpulan

Pada Bab 8: Show, Hide, dan Toggle jQuery, Anda telah belajar cara mengontrol tampilan elemen HTML dengan mudah. Show, Hide, dan Toggle adalah dasar animasi dan interaktivitas jQuery yang sering digunakan dalam website modern.

Bab berikutnya akan membahas Efek Animasi Lanjutan jQuery untuk membuat website lebih dinamis dan menarik.

Related Posts