div show hide menu using javasript

**dongan** · Apr 25, 2007, 08:12

My menus are...

main menu 1
sub menu 11
sub menu 12
sub menu 13
sub menu 14
main menu 2
sub menu 21
sub menu 22
sub menu 23
sub menu 24
sub menu 25
sub menu 26
main menu 3
sub menu 31
sub menu 32
sub menu 33
sub menu 34

I want a code to display main menu 1, main menu 2 and main menu 3 initially. When anyone clicks on main menu 1 it should display the sub menus of main menu 1. When anyone clicks on main menu 2, main menu 2 should expand and main menu 1 should be hidden automatically.

I also want to expand the main menu 1 automatically if one of the sub menus of main menu 1 is active.

Can anyone guide me in the right direction?

Any help is greatly appreciated. Thanks.

**funktifyknow** · Apr 25, 2007, 08:47

mootools, scriptaculous, or search google for accordion menus. i personally use the mootools framework. it is easy to use and simple to implement. i'd eventually, however, like to be able to have enough programming experience to have my own library.

**mortimer** · Apr 25, 2007, 12:32

If all you are after is an accordion menu then some thing like the following should do, there is no real need to include a library if that is the only function u want.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Title</title>
		<script type="text/javascript">
			var Nav = {
				Init : function(){
					navRoot = document.getElementById('menu').getElementsByTagName('UL');		
					for(i=0; i<navRoot.length; i++){
						//Check if the cookie value matches current id if so don't hide
						if(Cookie.Read('section') != navRoot[i].parentNode.id){
							navRoot[i].parentNode.className = 'closed'; //Set default class
						};
						navRoot[i].parentNode.onclick = Nav.Click; //Add Click event
					};
				},
				Click : function(){
					//Close all menus
					for(i=0; i<navRoot.length; i++){
						navRoot[i].parentNode.className = 'closed';
					};
					//Open clicked menu
					this.className = 'open';
					Cookie.Create('section', this.id, 5); //create open menu cookie save for 5 days
				}
			};
			
			
			window.onload = function(){
				Nav.Init();		
			}
			
			/* 
				General cookie function based on quirksmode examples
				http://www.quirksmode.org/js/cookies.html 
			*/
			var Cookie = {
				Create : function(name, value, days){
					if (days) {
						var date = new Date();
						date.setTime(date.getTime()+(days*24*60*60*1000));
						var expires = "; expires="+date.toGMTString();
					}
					else var expires = "";
					document.cookie = name+"="+value+expires+"; path=/";
				},
				Read : function(name){
					var nameEQ = name.toLowerCase() + "=";
					var ca = document.cookie.split(';');
					for(var i=0;i < ca.length;i++) {
						var c = ca[i].toLowerCase();
						while (c.charAt(0)==' ') c = c.substring(1,c.length);
						if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
					}
					return null;
				},
				Erase : function(){
					this.Create(name, "", -1);
				}
			};
		</script>
		<style type="text/css" media="screen">
			#menu li{cursor:pointer;}
			#menu li.closed ul{display:none;}
			#menu li ul{display:block;}
		</style>
  </head>
  <body>
  	<ul id="menu">
  	    <li id="menu1">
					Menu 1
					<ul>
					  <li><a href="#">submenu1</a></li>
					  <li><a href="#">submenu2</a></li>
					</ul>
				</li>
  	    <li id="menu2">
	  	    Menu2
					<ul>
					  <li><a href="#">submenu1</a></li>
					  <li><a href="#">submenu2</a></li>
					</ul>
  	    </li>
  	    <li id="menu3">
	  	    Menu3
					<ul>
					  <li><a href="#">submenu1</a></li>
					  <li><a href="#">submenu2</a></li>
					</ul>
  	    </li>
  	</ul>
  </body>
</html>

**dongan** · May 1, 2007, 06:25

Thanks guys. I just found this article http://www.howtocreate.co.uk/tutoria...seExample.html and found the solution. It works like a charm.

The SitePoint Forums have moved.

User Tag List

Thread: div show hide menu using javasript

Thread Tools

Display

div show hide menu using javasript

Bookmarks

Bookmarks

Posting Permissions