<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid #000}
#accordion
h2{background-color:#;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTZMMPeex5FscPvq1w91o7Tzq8pFNm1Y_nmUjVkjztRt-na_KIgwLkqC3PHKfpc0jX5-_4txVxJgPaChsqpNFGee4430OWDB11ELT1Elf_sE5hfcZ4fGsLE5vVk_CjGG-yneqMVEaqB8/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right
center;color:#d0cfce;font:normal 12px Tahoma;border-bottom:2px solid
#000;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 12px
Georgia;background:transfarent;padding:5px 0px} #accordion .content
li{background-image:url();background-repeat:no-repeat;background-position:left
center;text-indent:0;border-bottom:1px solid
#000;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li
a:hover{text-decoration:none;color:#00FFEE} #accordion
h2.active{background:#444;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJkhwgkfmDNSfTr64x0eJuXYEByLDveM3TesbWNutQKwYL9Ozhavwy3ACs5JS4ddcA0_cGmpRAbwmqfS6NiHsUNsTL1swxUD-JzmR97-8bTUSjbUWHpKw9QSFt0SmIJWeya7jjlAAsJ4/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right
center;font-weight:700} </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">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
- ganti tulisan yang berwarna Merah dengan tulisan anda atau kode JS anda.
0 komentar:
Posting Komentar
Click to see the code!
To insert emoticon you must added at least one space before the code.