Membuat Tab View Accordion Vertikal Dengan Jquery Versi II

 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://budaksepi.googlecode.com/files/menuaccordion.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>

silahkan di edit sendiri sesuai selera :)

sumber: http://nthoeng.blogspot.com/2012/03/membuat-tab-view-accordion-vertikal.html?showComment=1332954337353#c8914844880512538620

Membuat Tab View Accordion Vertikal Dengan Jquery Versi II

Posted by: Risalahati Dedic Ahmad Updated at: 01:36