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. Tips Dan Trik: Kumpulan Tombol Shortcut Windows XP
  2. Mengenal Pengaturan General pada Table Setup di PHPMaker
  3. Mengenal Database Helper Class di PHPMaker
  4. Penggunaan Image Dan Flash Dalam SEO
  5. Menangani Hak Akses untuk Anonymous User dari PHPMaker
  6. Cara Menghemat Kuota Internet dan Mempercepat Browsing Internet
  7. Games Sederhana dengan HTML5
  8. Mengenal Pengaturan Multi-Page pada Table Setup di PHPMaker
  9. Cisco Packet Tracer : Configuring Clouds
  10. Membuat Website Afiliasi Sederhana – Bagian 2
  11. Cara Cepat Membuka Aplikasi di Windows
  12. Menampilkan Google Map di Dalam Website atau Blog
  13. Tulis dan Publikasikan Artikel Blog Anda Menggunakan Microsoft Word 2007
  14. Kalender GUI Tanpa Visual Basic
  15. Tips Berhati-hati Terhadap Bahaya Keylogger T
  16. Fitur dan Cara Penggunaan Network View
  17. CSS Selector
  18. Teknik Menyembunyikan Folder 2
  19. Game Ding Dong dengan 7 Segment & AT89C52
  20. Insert, Update, Delete dan Select Gambar di VB.Net Dengan SQL Server 2005