jQuery show() hide() dan toggle()

Banyak pertanyaan sahabat tentang efek show dan hide pada blog ini, seperti pada Kode Konverter, Emoticon dan Shoutbox. Disini saya tidak akan menjelaskan pada penggunaan di blog saya, melainkan akan mencoba menjelaskan cara kerja efek show, hide dan toggle.

Sebelum menggunakan efek ini tentunya blog sobat harus sudah tertanam framework jQuery seperti ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi framework jQuery, maka efek-efek tidak akan berjalan.

Silahkan fahami dulu pengertian dari show, hide dan toggle :
.show() digunakan untuk menampilkan objek yang tersembunyi.
.hide() digunakan untuk menyembunyikan objek.
.toggle() melakukan perintah keduanya. Apabia objek tersembunyi maka akan dimunculkan, dan apabila muncul akan disembunyikan.

Syntax (Penulisan)

$(selektor).show(kecepatan)
$(selektor).hide(kecepatan)
$(selektor).toggle(kecepatan)

Selektor merupakan objek yang dikenai perintah, sedangkan Kecepatan bisa menggunakan Mildetik (contoh 500, 1000) 'normal', 'slow' atau 'fast'.

Contoh syntax terhadap satu id misalkan #kotak :

$('#kotak").toggle('slow')

Contoh Penggunaan .show() dan .hide()

Kerangka HTML

<span class="hilang">Hilang</span>
<span class="muncul">Muncul</span>
<div id="target"></div>

CSS

.muncul, .hilang {
    background:#56af2e;
    color:white;
    text-align:center;
    padding:8px 12px;
    font-family:Tahoma, Verdana;
    font-size:13px;
    border-radius:5px;
    cursor:pointer;    
}
#target {
  background:#1f57a3;
  height:150px;
  margin-top:15px;
}

Deklarasi jQuery

$(document).ready(function() {
    $('.hilang').click(function() {
        $('#target').hide('fast');
    });
    $('.muncul').click(function() {
        $('#target').show('slow');
    });
});

Demo

Contoh Penggunaan .toggle()

Kerangka HTML

<span class="muncul-hilang">Toggle</span>
<div id="target"></div>

CSS

.muncul-hilang {
    background:#56af2e;
    color:white;
    text-align:center;
    padding:8px 12px;
    font-family:Tahoma, Verdana;
    font-size:13px;
    border-radius:5px;
    cursor:pointer;   
}

#target {
  background:#1f57a3;
  height:150px;
  margin-top:15px;
}

Deklarasi jQuery

$(document).ready(function() {
    $('.muncul-hilang').click(function() {
        $('#target').toggle(500);
    });
});

Demo

• Coba Sendiri

Contoh Lainnya

Contoh pergantian teks dengan Buka dan Tutup :

$('.muncul-hilang').toggle(function() {
    $(this).text('Buka!');
    $('#target').slideUp();
}, function() {
    $(this).text('Tutup!');
    $('#target').slideDown();
});

Demo pergantian teks :




Untuk menambahkan efek lain seperti bounce, blind, shake dll sobat harus memasang plugin jQuery UI.

Sumber : http://www.w3schools.com/jquery/eff_toggle.asp - http://www.dte.web.id/2011/10/jquery-show-hide-dan-toggle.html