This jQuery menu is great for vertical menus, but its limitation is that it won’t remember state when changing pages.
In your header
<!--JQuery Accordion menu start -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion( {collapsible: true, active: false} );
});
</script>
<!--JQuery Accordion menu end -->
In your HTML
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Sub 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sub 2
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Sub 3
</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Sub 4
</p>
<p>
Sub 5
</p>
</div>
</div>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.