Menampilkan dan sembunyikan element dengan jquery

Tutorial kali ini adalah bagaimana menyembunyikan element pada halaman web anda menggunakan jquery. Biar kalian dapat gambaran bagaimana yang dimaksud dengan menyembunyikan dan menampilkan element tsb, DEMO

Untuk menggunakannya ataupun listing dari tampilan demo diatas adalah sebagai berikut:

sisipkan script berikut sebelum tag </head>

1. <script type="text/javascript" src="http //ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
2. <script type="text/javascript"> 
3.   $(document).ready(function(){ 
4.     $(".sembunyi").click(function(){ 
5.       $("#foto").hide("slow"); 
6.     }); 
7.  
8.     $(".tampil").click(function(){ 
9.       $("#foto").show("normal"); 
10.     }); 
11.   }); 
12. </script> 

dan untuk element yang ingin kita sembunyikan/tampilkan dapat diberikan id seperti yang sudah di deklarasikan pada script diatas, pada contoh diatas saya berikan sbb:

1. <button class="sembunyi">Sembunyikan</button>  
2. <button class="tampil">Tampilkan</button>  
3. <p><img id="foto" src="peluk.jpg" /></p> 

perhatikan pada script pertama, atau pada deklarasi javascript nya.
$(".sembunyi").click(function(){ 
      $("#foto").hide("slow");
dimana disitu menggunakan class dan id sebagai acuan dari perintah yang akan dikirim.
class sembunyi adalah untuk menyembunyikan element yang ber id foto . Kalian dapat mengubah dan modifikasi sesuai kebutuhan kalian.
Bagai mana?mudah bukan??
Semoga bermanfaat