Menyembunyikan dan menampilkan elemen dengan jQuery

Author: · Published: September 15, 2012 · Category: Pemrograman HTML, XML, CSS, Pemrograman Javascript 

Bismillah,

Tutorial Jquery kali ini mau share tentang bagaimana cara menyembunyikan dan menampilkan elemen, studi kasusnya adalah, ada dua buah tombol, tombol “tampil” dan tombol “sembunyi”, ketika tombol tampil di klik maka akan muncul gambar yang diselimuti elemen div, dan ketika di klik tombol sembunyi, maka elemen gambar akan menghilang, ilustrasi gambarnya bisa di lihat di bawah :

Gambar menyembunyikan elemen dengan jQuery

Berikut script dan penjelasannya :

<html>
<head>
 <title>Menyembunyikan dan menampilkan elemen dengan jQuery</title>
 <script type="text/javascript" src="jquery-1.7.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>

Demonya bisa disaksikan di sini : http://jsfiddle.net/7e78f/

Semoga bermanfaat,

Salam hangat,

Kinta Mahadji

Related Articles

  1. Tombol Input Mikrokontroller Pada Form Aplikasi Dengan Delphi 7
  2. Mengenal Client Scripts di PHPMaker
  3. Membuat web Input pada Server Apache
  4. Tips Dan Trik: Kumpulan Tombol Shortcut Windows XP
  5. Menghitung dan Menampilkan Jumlah Berapa Kali Tombol Pada Mikrokontroler Ditekan
  6. Cisco Packet Tracer : Configuring Clouds
  7. Penggunaan Image Dan Flash Dalam SEO
  8. Pengenalan Visual Studio LightSwitch HTML Client
  9. Games Sederhana dengan HTML5
  10. Membuat Website Afiliasi Sederhana – Bagian 2
  11. Membuat CD Profil Perusahaan Interaktif Bagian 10
  12. Membuat Backslide pada Website
  13. KONSEP PROGRAM
  14. CSS Selector
  15. Cara Cepat Membuka Aplikasi di Windows
  16. Traffic Light Berbasis Mikrocontroller ATMEGA 32A
  17. Kupas Tuntas CSS
  18. PHPdetail – Mengenal Function
  19. Membuat content web dengan Microsoft Word
  20. Tips Berhati-hati Terhadap Bahaya Keylogger T