Menyembunyikan dan menampilkan elemen dengan jQuery
Author: Kinta Mahadji · 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 :
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
- Mengenal Client Scripts di PHPMaker
- Membuat web Input pada Server Apache
- Tips Dan Trik: Kumpulan Tombol Shortcut Windows XP
- Cisco Packet Tracer : Configuring Clouds
- Mengenal Database Helper Class di PHPMaker
- KONSEP PROGRAM
- Membuat Backslide pada Website
- Games Sederhana dengan HTML5
- CSS Selector
- Menangani Hak Akses untuk Anonymous User dari PHPMaker
- Mengenal Pengaturan Multi-Page pada Table Setup di PHPMaker
- Membuat Website Afiliasi Sederhana – Bagian 2
- Pengenalan Visual Studio LightSwitch HTML Client
- Membuat CD Profil Perusahaan Interaktif Bagian 10
- Cara Cepat Membuka Aplikasi di Windows
- MudBlazor Input Component (Picker) Pada Blazor – Part 3
- Tulis dan Publikasikan Artikel Blog Anda Menggunakan Microsoft Word 2007
- Tips Berhati-hati Terhadap Bahaya Keylogger T
- Langkah Membuat Soal Pilihan Ganda dan Esai dengan Authorware 7
- Seri-4 Bootstrap: Plugin Javascript