Cara Membuat Tab View buka-tutup dengan JQuery

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.

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

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

.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;
}

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

DEMO