Accordian menu tanpa edit HTML

Accordion menu adalah untuk memperingkas tampilan blog, juga dapat mempercantik blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. untuk demo gambar nya bisa lihat

Di Sini

Untuk background warna terang langsung aja copy script di bawah 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/AVvXsEiTtqm-rB_yszUZ-w3xGZdPQANM0NxBUm8jRyPabwRgQePrxZEIVC7XcYkso4zKRn7h9_DNmKlOP226oev-SZMOnEUnHM__z0QfgVnh0_E1AjClPxqlVLoW12yMCMa2egELT2hbRUDJYEI/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/AVvXsEhqKsTCx9iZMXwGrt5vxDio4FlTj5IJ4c_XJtZXP6iDB_8Rk0QL1s1DondxJ1JJgV_Fez8tJizfISGfieKscUITCQN2qBnFdKjwz0HfVjHv5UyR-LuxmeNSU-Y0nlRtuyls2OMIU56EiO4/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://ronisundanicus.googlecode.com/files/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> 

Dan untuk latar belakang warna gelap copy kode ini:


<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrKvsnPS60nl2lb3jZDgJ5SQN9fQCNNa7Z2CvFchhIWJYLhrUS_ORidlB-Yo5LtLSnvzamz1FfE0Cyq6rZ5SQDuzL6Xcy0JYV1R1ad9CvWphWbWtb_hKYRcqCZbZVQIBUuZIbyURNHmo/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GRdgIL-Rtuad7Q_ir0cTjW9EyPNyKNtEWyMDrRer0GuhW3FMAr-pTGe_I2VQ_j5G_ZANu6tRh7ZqjqpRPQQDGe5YafEDBJqmfFBTkOVpussn7noyc11tN88ugx3lcd8iwMRtF6ESmDc/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://ronisundanicus.googlecode.com/files/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>

Semoga bermanfaat 

Sumber