Membuat Tombol Toggle dengan Jquery
Kita sering melihat suatu situs yang terdapat banyak fitur, ketika kita klik di fitur tertentu akan muncul sub fitur lainya. Tombol tersebut istilahnya ialah toggle. Tombol toggle ini biasanya memang dikerjakan bagi mengerjakan aksi seperti memunculkan isi konten yang sempat di sembunyikan. Contohnya ya seperti fitur dan sub menunya. Lalu bagaimana cara merancang tombol tersebut ?. Jawabanya ialah kita menggunakan jquery.
Jquery ini ialah spesialis bagi merancang tampilan menjadi menarik. Sesuai dengan pembahasan kita kali ini, kita akan belajar membuat tombol toggle dengan jquery. Tombol toggle ini memang termasuk pada fitur jquery. Fungsinya yang di tak lain ialah bagi mengatur muncul dan menyembunyikan isi konten tertentu via tombol yang kita atur selaku acunanya. Bagi merancang kegunaan ini lumayan gampang. Kalian dapat ikuti contoh code dibawah ini.
Bikin 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 bagi menyembunyikan dan menampilkan konten</button>
</body>
</html>
Setelah telah kalian simpan filenya dengan format html. Lalu bagi melihat hasilnya kalian dapat buka file tersebut via browser kesayangan kalian. Kalau berhasil karenanya tampilanya akan seperti ini.
Gambar diatas ialah tampilan awal sebelum tombol ditekan. Kalian dapat mencoba bagi menekan tombolnya dan hasilnya akan seperti dibawah ini.
Ketika ditekan karenanya hasilnya ialah teks yang berada diatasnya disembunyikan. Ketika kalian tekan kembali tombolnya, hasilnya ialah teks tersebut ditampilkan.
Hal ini dapat terjadi karena kegunaan toggle di jquery yang terdapat di script berikut.
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).toggle();
});
});
kalau button ditekan karenanya tag p akan disembunyikan/ditampilkan karena tag p tersebut memilki kegunaan toggle( hide() dan show() ). Seperti itu kira-kira cara kerjanya.
Kalian dapat bikin sesuai dengan keperluan situs kalian masing-masing. Dapat jadi toggle kalian menjadi lebih kompleks dan lebih keren.
Sekianlah pembahasan mengenai bagaimana kita belajar membuat tombol toggle dengan jquery. Semoga artikel kali ini bermanfaat bagi kita segala.
Sumber https://kursuswebsite.org
