jQuery Collapsible Accordian Table
Kod bagi Collapsible Menu (Accordian)
<script src="http://jquery.com/src/jquery.js"></script>
<script>
jQuery.noConflict();
(function($) {
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
})(jQuery);
</script>
<style>
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
<dl>
<dt><a href="/">jQuery</a></dt>
<dd>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Blog</a></li>
</ul>
</dd>
<dt><a href="/">Community</a></dt>
<dd>
<ul>
<li><a href="#">Mailing List</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">Plugins</a></li>
</ul>
</dd>
<dt><a href="/">Development</a></dt>
<dd>
<ul>
<li><a href="#">Source Code</a></li>
<li><a href="#">Bug Tracking</a></li>
<li><a href="#">Recent Changes</a></li>
</ul>
</dd>
</dl>