Membuat Tab View Accordion Vertikal Dengan Jquery Versi II

Pada waktu yang lalu telah dibahas mengenai Membuat Tab View Accordion I, kali ini kita akan membahas Membuat tab view accordion II, bedanya pada tab view ini kerja membuka atau menutupnya tab tergantung dengan Klik pada tab, bukan seperti Tab View Accordion I yang menggunakan sentuhan cursor untuk membukanya. Dalam pemberian efek slidenya, Tab view ini juga menggunakan script Jquery, Sebagai demo lihat sidebar pada blog ini. Tutorial pembuatannya sebagai berikut :

 1. Log In ke Blogger.
 2. Pilih tab Rancangan, Elemen Laman, dan pilih Tambah Gadget.
 3. Selanjutnya Html/Javascript, dan masukan script berikut :

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{cursor:pointer;margin:1px 0px;padding:5px 8px;background-color:transparent;font:bold 12px Verdana,Arial,Sans-Serif;color:#a1a1a1;text-shadow:0px 1px 0px rgba(0,0,0,0.4)}
#accordion .content{background-color:transparent;padding:5px 5px;margin: 10px 0pt 10px;font-family:Arial;font-size:12px;color:relative}
#accordion h2.active{background:transparent;color:relative;border:1px solid lime; }
</style>

<script type="text/javascript" src="http://nthoeng.googlecode.com/files/newmenuaccord.js"></script>

<script type='text/javascript'>

$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>TAB 1</ h2>
<div class="content">
Konten Di Sini.
</div>
<h2>TAB 2</h2>
<div class="content">
Konten Di Sini.
</div>
<div id="accordion">
<h2>TAB 3</h2>
<div class="content">
Konten Di Sini.
</div>

<div id="accordion">
<h2>TAB 4</h2>
<div class="content">
Konten Di Sini.
</div>
</div></div></div>
</div>

 4. Kemudian Save.

Nb : Jika dalam template Anda telah terdapat file Jquery, maka teks warna merah tidak perlu di copy.

Semoga Bermanfaat.

Tweet