membuat navigation menu accordion

Kalau pada tutorial sebelumnya kita membuat menu Accordion dengan sederhana, Maka pada tutorial kali ini kita akan membuat navigation menu accordion dengan menggunakan CSS dan JavaScript. Biasanya digunakan untuk menu/daftar yang panjang pada tampilan sidebar jadi dibuat lebih simpel/ringkas yang ketika diklik akan terbuka ataupun tertutup. Jika menu lainnya dibuka (diklik), maka menu sebelumnya yang terbuka akan otomatis tertutup. Selain hemat tempat, juga mempercantik tampilan pada website.
Mungkin ini adalah salah satu solusi menyembunyikan widget yang terlalu banyak di halaman blog sobat.

Untuk Demonya bisa anda lihat dengan cara mengklik menu Accordion nya :

Title 1

Isi konten 1

Title 2

Isi konten 2

Title 3

Isi konten 3

Title 4

Isi konten 4

Title 5

Isi konten 5

cara membuat menu Accordion nya.

1. Masuk ke Blogger.com
2. Klik Tata Letak => Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini :

 <style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2XFtdmq1xNuBGLb0FWxKgjxHasbO1fJF39cc221rCmSmFSFeCCQOWXuR4HSzN82yy3U3ebo8sk88jp1Fr5X3e2FXbEdgtsCbmIKzkftrAff6PtZwNDSFcF66mbJhQ8j8O7GuzR5tp1tM/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLGM-UuIDxF3uI11gD14KmtgqqcR_XN5Vu7cDLDyPseKUSPN5UTuPHahXDF9JW6ghrfRh69c-XEAqog7u_1JbKGr0NM5iEchWdlE6QNPtfvpql-_ZJ2GsPYBfs-uJe2KzSVwey5zQxUw/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.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>Title 1</h2>
<div class="content">
Isi konten 1 </div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2 </div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3 </div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4 </div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5 </div>
</div></div></div></div></div>

• Note : Silakan ganti teks berwarna Merah untuk Judul heading menu accordion, teks berwarna Biru : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget).

5. SIMPAN dan lihat hasilnya.