Hello, I have been using a script for a collapsible menu with 2 levels... but now I need to have 2 levels and 3 levels. I have been trying a few things but it does not work. Could you help me please to modify this script so I can get what I want? Many thanks Elisabeth This is my code. Please, help me modify it so I can get the 3rd level <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> <!-- #menu { position:relative; font-family: Arial, Helvetica, sans-serif; width:400px; } --> </style> <%@ include file="javascriptLib.html" %> <script language="JavaScript" type="text/JavaScript"> <!--- oculta el script para navegadores antiguos var origValue=null; var fieldIndex=null; if (self.location != top.location) { // top.location = self.location; } subcol='white';//El bgcolor de los sub-enlaces indent=20;//La indentacion a la izquierda en pixels function coll() { var dd=document.getElementById('menu').getElementsByTagName('div'); for (var i=1;i<dd.length;i=i+2) { dd[i].style.position='relative'; dd[i].style.display='none'; dd[i].style.backgroundColor=subcol; dd[i].style.left=indent+'px'; } } function activ(w) { var d=w.parentNode.getElementsByTagName('div')[0]; if(d.style.display=='none') { coll();d.style.display='inline'; } else { d.style.display='none'; } } onload=coll(); // end hiding from old browsers --> </script> </head> <body onload=coll()> <!-- Menu --> <div id="menu" style="width:100%; margin:auto;"> <bl> <div> <li><a href="#" id="L1" onclick="activ(this)">TITLE1</a><br> <div> <a href="#" onclick="activ(this)">TITLE1.1</a><br> </div> </div> <br> <div> <li> <a href="#" onclick="activ(this)">TITLE2</a><br> <div> <a href="foo1.jsp">- TITLE2.1</a><br> <a href="foo2.jsp">- TITLE2.2</a><br> </div> </div> </bl> </div> <!-- END Menu --> </body> </html> Code (markup):
Hi. Try this script (the code that you posted is not efficient at all): <script language="JavaScript"> function show_subcategory(container_name) { if (container_name.style.display == "none") { container_name.style.display = ""; } else { container_name.style.display = "none"; } } </script> <div id="main_navigation_container"> <a href="#" onClick="show_subcategory(home_container)">LINK 1</a> <div id="home_container" style="display:none"> <a href="#">- LINK 1.1</a><br /> <a href="#">- LINK 1.2</a><br /> <a href="#">- LINK 1.3</a><br /> <a href="#" onClick="show_subcategory(home_containerx)">+ LINK 1.4</a> <div id="home_containerx" style="display:none"> <a href="#"> - LINK 1.4.1</a><br /> <a href="#"> - LINK 1.4.2</a> </div> </div> <div style="clear:both"></div> <a href="#" onClick="show_subcategory(diamond_container)">LINK 2</a> <div id="diamond_container" style="display:none"> <a href="#">- LINK 2.1</a><br /> <a href="#">- LINK 2.2</a><br /> </div> </div> Code (markup): LINK 1.4 has sublinks in the example.