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
Contents
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.