Membuat menu accordion dengan mudah

Syalom kembali bersama-sama Reportase El-Shadai.., kali ini  saya akan bagi-bagi cara membuat menu atau navigasi accordion. menurut saya menu accordion ini bisa menghemat tempat dan enak dilihat pokoknya mantab deh.. oke langsung aja ya.... copy paste kode berikut di bawah </head>

<script src='http://niev.googlecode.com/files/accordion-sidebar.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h2:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion div:not(:first)&quot;).hide();
$(&quot;.accordion h2&quot;).click(function(){
$(this).next(&quot;div&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;div:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h2&quot;).removeClass(&quot;active&quot;);
});
});
</script>

<style type='text/css'>
.accordion {width: 330px;border-bottom: solid 1px #C4C4C4;}
.accordion h2 {background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jM5758fsStKoXiiaxUHqKu4cknGXaytxKw6JLVzImcDQWSnoLTE7pBMhMWjkO0dpSKbfEqG1aXP4mOpp5OH2FfZU7DInpZR7WKsFye3rv6XD3SAUPio7NYe9E_2rYK2f8bKKv5l2NvE/s320/arrow-square.gif) no-repeat right -51px;padding: 7px 15px;margin: 0;font: bold 120%/100% Arial, Helvetica, sans-serif;color:#fff;border: solid 1px #c4c4c4;border-bottom: none;cursor: pointer;}
.accordion h2:hover {background-color: #666;}
.accordion h2.active {background-position: right 5px;}
.accordion div {background: #fff;margin: 0;padding: 10px 10px 20px;border-left: solid 1px #c4c4c4;border-right: solid 1px #c4c4c4;}
</style>

Kemudian simpan template..!

Tambahkan HTML/JavaScript ini [copy paste aja.! langsung].

<div class='accordion'>
<h2>judul [1]</h2>

<div>
isi
</div>

<h2>judul [2]</h2>

<div>
isi
</div>

<h2>judul [3]</h2>

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

Dan simpan... simpelkan, semoga bermanfaat..( GBU).