Kita sering melihat suatu website yang terdapat banyak menu, saat kita klik pada menu tertentu akan muncul sub menu lainya. Tombol tersebut istilahnya adalah toggle. Tombol toggle ini biasanya memang dibuat untuk melakukan aksi seperti memunculkan isi konten yang sempat di sembunyikan. Contohnya ya seperti menu dan sub menunya. Lalu bagaimana cara membuat tombol tersebut ?. Jawabanya adalah kita menggunakan jquery.
Jquery ini adalah spesialis untuk membuat tampilan menjadi menarik. Sesuai dengan pembahasan kita kali ini, kita akan belajar membuat tombol toggle dengan jquery. Tombol toggle ini memang termasuk dalam fitur jquery. Fungsinya yang di tidak lain adalah untuk mengatur muncul dan menyembunyikan isi konten tertentu melalui tombol yang kita atur sebagai acunanya. Untuk membuat fungsi ini cukup mudah. Kalian bisa ikuti contoh code dibawah ini.
Buat file html terlebih dahulu seperti ini.
toggle.html
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).toggle();
});
});
</script>
</head>
<body>
<p>Ini paragraf.</p>
<button>Toggle untuk menyembunyikan dan menampilkan konten</button>
</body>
</html>
Setelah sudah kalian simpan filenya dengan format html. Lalu untuk melihat hasilnya kalian bisa buka file tersebut melalui browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.
Gambar diatas adalah tampilan awal sebelum tombol ditekan. Kalian bisa mencoba untuk menekan tombolnya dan hasilnya akan seperti dibawah ini.
Saat ditekan maka hasilnya adalah teks yang berada diatasnya disembunyikan. Saat kalian tekan kembali tombolnya, hasilnya adalah teks tersebut ditampilkan.
Hal ini bisa terjadi karena fungsi toggle pada jquery yang terdapat pada script berikut.
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).toggle();
});
});
jika button ditekan maka tag p akan disembunyikan/ditampilkan karena tag p tersebut memilki fungsi toggle( hide() dan show() ). Seperti itu kira-kira cara kerjanya.
Kalian bisa buat sesuai dengan kebutuhan website kalian masing-masing. Bisa jadi toggle kalian menjadi lebih kompleks dan lebih keren.
Sekian pembahasan mengenai bagaimana kita belajar membuat tombol toggle dengan jquery. Semoga artikel kali ini bermanfaat untuk kita semua.