Vertikal Tab View Dengan jQuery

Pasti banyak para blogger ingin widget nya tidak melebihi batas pada sidebar ....dan juga jika banyak yang ngin menggunakan banyak widget bisa pakai cara ini untuk menghemat tempat ...

mau tau demonya ?? disini

gmana lumayan bukan nih kode Css, jQuery, dan HTML nya

CSS

<style type="text/css">

#accordion {

width:90%;

margin:10px auto;

border:2px solid white;

-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);

box-shadow:0px 1px 3px rgba(0,0,0,0.4);

}

#accordion h2 {

cursor:pointer;

margin:0px 0px;

padding:7px 15px;

background-color:black;

font:bold 11px Verdana,Arial,Sans-Serif;

color:#e6e6e6;

text-shadow:0px 1px 0px rgba(0,0,0,0.4);

}

#accordion .content {

background-color:#ddd;

padding:10px 15px;

color:black;

height:120px;   

}

#accordion h2.active {

background-color:#4BB347;  

}

</style>

jQuery

<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>

HTML

<div id="accordion">

<h2>Panel 1</h2>

<div class="content">

....

</div>

<h2>Panel 2</h2>

<div class="content">

....

</div>

<h2>Panel 3</h2>

<div class="content">

....

</div>

<h2>Panel 4</h2>

<div class="content">

....

</div>

</div>

jika kalian ingin tampilan nya lebih bagus bisa kalian modifikasi sendiri
Semoga Trik Blogger kali ini bermanfaat ^^

sumber