Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery
HobbyTekno - Pada Postingan ini, kita akan membuat sebuah project Menggunakan Event Show, Hide, dan Toggle. Saat tombol di klik, maka akan menampilkan dan menyembunyikan objek atau element yang diinginkan.
Langsung saja simak langkah-langkahnya
Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery
1. Buat file .html baru, Ketik Tag Dasar HTML, link ke jQuery dan script.js, ketik seperti kode berikut
<!DOCTYPE html>2. Buat file baru dengan nama script.js
<html lang="en">
<head>
<!-- Link ke jQuery -->
<script src="jquery.js"></script>
<!-- Link ke Script.js -->
<script src="script.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial jQuery #5</title>
</head>
<body>
</body>
</html>
3. Pada file .html Kita tambahkan Tombol dengan ID hide, show, dan toggle pada bagian <body>
<button id="hide">Hide</button>4. Lalu tambahkan sebuah div dengan class box yang akan kita gunakan nantinya.
<button id="show">Show</button>
<button id="toggle">Toggle</button>
5. Tambahkan style agar box lebih menarik. Tambahkan diatas tag </head>
<style>
.box {
margin-top: 10px;
width: 250px;
height: 100px;
padding: 10px;
color: white;
background-color: blue;
}
</style>
5. Selanjutnya, Pada script.js kita ketik kode berikut.
$(document).ready(function () {6. Selesai, saat tombol di klik, akan menjalankan Event masing-masing.
$('#hide').click(function () {
$('.box').hide('slow');
})
$('#show').click(function () {
$('.box').show('normal');
})
$('#toggle').click(function () {
$('.box').toggle('fast');
})
})
Penjelasan
Pada saat tombol #hide di klik, maka sembunyikan .box. anda bisa mengganti kecepatannya menjadi slow, normal, fast, dan dalam bentuk format angka yaitu milisecond.
$('#hide').click(function () {
$('.box').hide('slow');
})
$('#show').click(function () {Pada saat tombol #toggle di klik, maka tampilkan dan sembunyikan .box. Toggle merupakan gabungan dari Show dan Hide.
$('.box').show('normal');
})
$('#toggle').click(function () {
$('.box').toggle('fast');
})
Anda bisa mengembangkannya menjadi sesuatu yang berguna ataupun menarik dalam project website anda.
Sekian Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar
No comments for "Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery"
Post a Comment