jQuery show() hide() dan toggle()

Pada kesemptan ini saya akan menjelaskan bagaimana cara membuat jQuery show() hide() dan toggle() tetapi untuk 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.