Memasang Accordion Dengan Jquery dan Css

sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion,sobat bisa lihat contoh'a disini dengan Accordion kamu bisa mengurangi
tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n



Pertama,masukan kode HTML ini ke blog kamu...
isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a

<div class="container">
<h2 class="acc_trigger"><a href="#">Menu1</a></h2>
<div class="acc_container">
<div class="block">


Isi widget/text kamu disini

</div>
</div>

<h2 class="acc_trigger"><a href="#">Menu2</a></h2>
<div class="acc_container">
<div class="block">


Isi widget/text kamu disini

</div>
</div>
</div>

kemudian,masukan CSS ini di template sobat

h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(http://www.sohtanaka.com/web-design/examples/accordion/h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}

Note:url gambar bisa kamu ganti sesuai kebutuhan.atau dapat diganti dengan CSS 3





setelah itu,copy paste script ini di bawah kode ]]></b:skin>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});
</script>

selesai deh...
selamat mencoba n_n