Menu
Hello,
is there someone who can help me tot collapse and expand my menu? I have realy no idear how te fix this.
Here is the script of the menu:
<html>
<head>
<title>Navigatie Menu Intranet</title>
<link rel=”stylesheet” href=”menustyle.css” type=”text/css”>
<script language=”javascript” src=”tree.js”></script>
</head>
<body>
<table cellspacing=”0″ cellpadding=”0″ border=”0″ width=”159″>
<tr>
<td align=”center” valign=”top” style=”height: 112px; text-align: center; background-image: width=”159″>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td style=”height:6px;”></td>
</tr>
<tr>
<td><div align=”center”></a>
<map name=”Map”>
<area shape=”poly” coords=”102,1,105,2,105,49,57,51,0,51,-3,25,54,25,55,3″>
<area shape=”poly” coords=”105,31,133,31,134,82,86,82,21,82,21,53,88,52,107,52,104,31″> </map>
</div></td>
</tr>
</table> </td>
</tr>
<tr>
<td width=”159″></td>
</tr>
<td bgcolor=”#FFDF1B” width=”159″>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’><div align=”right”></div></td><td>Home
</table>
<tr>
<td bgcolor=”#FFDF1B” width=”159″></td>
</tr>
<tr>
<td bgcolor=”#FFDF1B” width=”159″>
<table border=”0″ width=”161″ cellspacing=”1″ cellpadding=”1″>
<tr>
<td width=”16″><div align=”right”><a id=”xpersoneel” href=”javascript:Toggle(‘personeel’);”></a></div></td>
<td width=”131″><a id=”xpersoneel” href=”javascript:Toggle(‘personeel’);”>HOOFDTEST</a></td>
</tr>
</table>
</td>
</tr>
<td bgcolor=”#FFEB7A” width=”159″>
<div id=”personeel” style=”display: none; margin-left: 2em;”>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’><a id=”xsmoelenboek” href=”javascript:Toggle(‘smoelenboek’)</a></td><td><a href=”javascript:Toggle(‘smoelenboek’);”>TEST</a></table>
<div id=”smoelenboek” style=”display: none; margin-left: 2em;”>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>SUBTEST</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>SUBTEST</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>SUBTEST</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>SUBTEST</td></tr></table>
</div>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>TEST1</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>TEST2</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>TEST3</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>TEST4</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>TEST5</td></tr></table>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’></td><td>TEST6</td></tr></table>
</div>
<tr>
<td bgcolor=”#FFDF1B” width=”159″></td>
</tr>
<td bgcolor=”#FFDF1B” width=”159″>
<table border=0 cellpadding=’1′ cellspacing=1><tr><td width=’16’><div align=”right”></div></td><td>Sitemap
</table>
<tr>
<td bgcolor=”#FFDF1B” width=”159″></td>
</tr>
<tr>
<td width=”159″><div align=”left</div></td>
</tr>
</table>
</body>
</html>
Here is the script of the tree.js:
function Toggle(item) {
obj=document.getElementById(item);
visible=(obj.style.display!=”none”)
key=document.getElementById(“x” + item);
if (visible) {
obj.style.display=”none”;
key.innerHTML=”<img src=’folder.gif’ width=’6′ height=’6′ hspace=’0′ vspace=’0′ border=’0′>”;
} else {
obj.style.display=”block”;
key.innerHTML=”<img src=’textfolder.gif’ width=’6′ height=’6′ hspace=’0′ vspace=’0′ border=’0′>”;
}
}
function Expand() {
divs=document.getElementsByTagName(“DIV”);
for (i=0;i<divs.length;i++) {
divs[i].style.display=”block”;
key=document.getElementById(“x” + divs[i].id);
key.innerHTML=”<img src=’textfolder.gif’ width=’6′ height=’6′ hspace=’0′ vspace=’0′ border=’0′>”;
}
}
function Collapse() {
divs=document.getElementsByTagName(“DIV”);
for (i=0;i<divs.length;i++) {
divs[i].style.display=”none”;
key=document.getElementById(“x” + divs[i].id);
key.innerHTML=”<img src=’folder.gif’ width=’6′ height=’6′ hspace=’0′ vspace=’0′ border=’0′>”;
}
}
I hope that someone can help me with this menu.