Ketika tombol "Tampil" di klik, maka elemen Box akan muncul, jika tombol "Sembunyi" di klik maka elemen box akan tersembunyi. berikut ini scriptnya :
< html>
<head>
<title>Menyembunyikan dan menampilkan elemen dengan jQuery</title>
< script type="text/javascript" src="jquery-1.4.2.min.js"></script>
< script>
//Inisiasi awal penggunaan jQuery
$ (document).ready(function(){
//Pertama sembunyikan elemen class gambar
$ ('.gambar').hide();
//Ketika elemen class tampil di klik maka elemen class gambar tampil
$ ('.tampil').click(function(){
$('.gambar').show();
});
//Ketika elemen class sembunyi di klik maka elemen class gambar sembunyi
$ ('.sembunyi').click(function(){
//Sembunyikan elemen class gambar
$ ('.gambar').hide();
});
});
</script>
</head>
<body>
<input type="button" class="tampil" value="Tampil"/>
<input type="button" class="sembunyi" value="Sembunyi"/>
<div class="gambar">
<img src="gambar.gif"/>
</div>
</body>
</html>
Simpan file di atas dengan nama "index.html" dalam satu folder dengan file "jquery-1.8.2.min.js" , untuk file jQuery nya bisa di download : di sini kemudian save as menjadi nama "jquery-1.4.2.min.js" .
Atau untuk contoh script lengkap di atas dapat di download di sini.
Download Script Show Hide JQuery
By : Suwondo.NET
Tidak ada komentar:
Posting Komentar