Estoy diseñando un menú mediante css - listas donde la persona hace click sobre el tema que le interesa y aparece el contenido. Si hace click sobre otro tema del menú, el contenido anterior se oculta y aparece el nuevo. Esto me funciona bien en un menu de un nivel, pero si tiene varios no me funciona... y no se como cambiar el código javascritp. Alguna ayudita o un tutorial que me pueda orientar? gracias.
El código javascript es el siguiente:
Código HTML:
<script type="text/javascript"> <!-- menu_status = new Array(); var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } //--> </script>
Y el código del menú sería el siguiente:
Código HTML:
<ul> <li><a class="menu1" onclick="showHide('mymenu6')">Grupo 1</a></li> <div id="mymenu6" class="hide"> <ul> <li><a class="menu1" onclick="showHide('mymenu7')">Grupo 1 - B</a></li> <div id="mymenu7" class="hide"> <ul> <li><a href="#">Elemento1</a></li> <li><a href="#">Elemento2</a></li> <li><a href="#">Elemento 3</a></li> </ul> </div> </ul> </ul>