JavaScript Accordion Menu

Downloads:498

Bookmark this code

Rank : Not rated yet
Rated by : 0 user(s)

Developer:

Andrew R | 13 submission(s)

Date Uploaded:

January 16,2010

Level:

Begginer

Size:

0 Bytes

Category:

Javascript -> Menus

Developer Says:

You can create your own Accordion Menu with little javascript. The sample code uses a function 'toggle' to change the state of a menu. To make sure only one menu is open at a specific time, the variable last_id is used to close the last opened menu. Here is a Demo of the code below

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javasript Tree Menu</title>
<script language="javascript"> 
	var last_id=null;
	function toggle(id){
		var e=document.getElementById(id);
		e.style.display=e.style.display=='' ? 'none' : '';
		if(last_id==null){
			last_id=document.getElementById('php');
		}
		if(last_id!=e)			
			last_id.style.display='none';
		last_id=e;
	}
 </script>
<style>
ul.menu{
	margin:0px;
	padding:0px;
}
ul.menu li{
	list-style:none;
	background-color:#F93;
	margin-top:1px;
}
ul.menu li a{
	font-family:verdana;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
}
ul.links{
	margin:0px;
	padding:0px;
}
ul.links li{
	background-color:#f1f1f1;
	padding-left:20px;
	margin:0px;
}
ul.links li a{
	color:#333;
	font-weight:normal;
}
ul.links li a:hover{
	color:#333;
	text-decoration:underline;
}
</style>
</head>

<body>
	<div style="border:2px solid #666; width:220px;">
	<ul class="menu">
        <li><a href="javascript:toggle('php')">&nbsp;&nbsp;PHP</a></li>
        <ul id="php" class="links">
            <li><a href="#">Database</a></li>
            <li><a href="#">Miscellaneous</a></li>
            <li><a href="#">Images/Graphics</a></li>
            <li><a href="#">PHP Basics</a></li>
        </ul>
	    <li><a href="javascript:toggle('vb6')">&nbsp;&nbsp;VB6</a></li>
        <ul id="vb6" class="links" style="display:none;">
            <li><a href="#">Controls and Forms</a></li>
            <li><a href="#">Complete Applications</a></li>
            <li><a href="#">Graphics</a></li>
            <li><a href="#">Input/Output</a></li>
        </ul>
		<li><a href="javascript:toggle('vbnet')">&nbsp;&nbsp;VB.Net</a></li>
        	<ul id="vbnet" class="links" style="display:none;">
                <li><a href="#">Controls and Forms</a></li>
                <li><a href="#">Database</a></li>
                <li><a href="#">Encryption/Security</a></li>
				<li><a href="#">Miscellaneous</a></li>
			</ul>
		<li><a href="javascript:toggle('java')">&nbsp;&nbsp;Java</a></li>
        	<ul id="java" class="links" style="display:none;">
                <li><a href="#">Language Basics</a></li>
                <li><a href="#">Network Applications</a></li>
                <li><a href="#">AWT and Swing</a></li>
                <li><a href="#">Applets</a></li>
			</ul>
		</ul>            
    </div>
</body>
</html>

The above code was highlighted with Neat Highlighter

User Reviews

There are no user reviews on this code

Keyword:
Category:
	Advance Search >>