Menampilkan dan Menyembunyikan elemen html dengan jquery

Waduh, selama menginjak 2013, belum ada post nih yah :D...
Maaf ceritanya lagi sibuk :p
Oke, kita akan coba kasih tutorial tentang jquery, dimana tutorial kali ini adalah bagaimana meng HIDE dan SHOW element menggunakan jquery,berikut script nya

1. <script type="text/javascript">  
2. $(document).ready(function() {  
3.     $(".tambah").hide();  
4.     $("#deni").click(function() {  
5.     if ($(".tambah").is(":visible"))   
6.     {  
7.         $(".deni").show('slow');  
8.         $(".tambah").hide('slow');  
9.     }  
10.     else   
11.     {  
12.     $(".deni").hide('slow');  
13.     $(".tambah").show('slow');  
14.     }  
15.     });  
16. });  
17. </script>  

Nah,puyeng gak??? :D
Jangan langsung bilang puyeng,kita coba bahas satu2...

#deni >> adalah sebuah element html yang memiliki id="deni"
.tambah >> ini juga tag html yg memiliki class="tambah"

Lalu pada baris $(".tambah").hide(); ini berarti bahwa kita memerintahkan agar tag class="tambah" disembunyikan dari penglihatan :p
Berikutnya ada $("#deni").click(function() { baris ini bermaksut untuk memberikan sebuah event click.jadi pada saat tag id="deni" di klik, maka akan mengeksekusi script berikutnya.
Next ada penyeleksian kondisi, mungkin bagi kalian yang sudah memahami konsep penyeleksian kondisi dengan php, script berikut akan terasa mudah,

1. if ($(".tambah").is(":visible"))     
2.     {    
3.         $(".deni").show('slow');    
4.         $(".tambah").hide('slow');    
5.     }    
6.     else     
7.     {    
8.     $(".deni").hide('slow');    
9.     $(".tambah").show('slow');    
10.     }  

pada listing tersebut dijelaskan bahwa jika class="tambah" dalam posisi terlihat, maka id="deni" akan tampil,dan selanjutnya class="tambah" akan menghilang, begitu juga sebaliknya.

untuk demo nya lihat dibawah ini

Klik Untuk Tampilkan

Elemen yang disembunyikan berada dalam tag class tambah

Code nya sbb :

1. <script type="text/javascript">  
2. $(document).ready(function() {  
3.  $(".tambah").hide();  
4.  $("#deni").click(function() {  
5.  if ($(".tambah").is(":visible"))   
6.  {  
7.   $(".deni").show('slow');  
8.   $(".tambah").hide('slow');  
9.  }  
10.  else   
11.  {  
12.  $(".deni").hide('slow');  
13.  $(".tambah").show('slow');  
14.  }  
15.  });  
16. });  
17. </script>  
18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>  
19. <a href="#demo" id="deni"> Klik Untuk Tampilkan</a>  
20. <div class="tambah">  
21. Elemen yang disembunyikan berada dalam tag class tambah  
22. </div>  

Semoga bermanfaat :). monggo dikoment