Member Avatar for luweegee

Hello Guys!

I'm looking for a javascript that will expand the list and collapsing of this menu...

<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    </ol>
  </li>
</ul>
Edited by luweegee because: n/a
  • 2 Contributors
  • 1 Reply
  • 348 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

JQuery make this very easy:

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function()
			{
				$("#menu > li").click(function()
				{
					$(this).children("ol").slideToggle();
				});
			});
		</script>
	</head>

	<body>
		<ul id="menu">
		  <li>Menu Item 1
			<ol>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			</ol>
		  </li>
		</ul>
	</body>
</html>

Hope it helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.