This jQuery menu is great for vertical menus, but its limitation is that it won’t remember state when changing pages.

jQuery Accordion

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.

Comments

Your email address will not be published. Required fields are marked *