Tengo una funcion que al hacer click en un link se expande un menu debajo,
consigo que uno funcione bien, pero no consigo hacer mas de uno,
creo que es porque no puedo usar mas de una vez el mismo
id<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#menuList {
padding-right: 0px;
padding-left: 15px;
padding-bottom: 10px;
margin: 0px;
padding-top: 10px;
}
li.menubar {
list-style-position: outside;
font-size: 12px;
background: url(img/plus.gif) no-repeat 0em 0.3em;
line-height: 1.5em;
list-style-type: none;
}
.menu {
padding-right: 0px;
display: none;
padding-left: 0px;
padding-bottom: 0px;
margin-left: 15px;
padding-top: 0px;
}
.menu li {
list-style-position: outside;
list-style-type: none;
}
a.heading {
padding-left: 15px;
font-size: 12px;
color: #000000;
background-color: transparent;
text-decoration: none;
}
a.heading:hover {
text-decoration: underline;
}
.heading {
padding-left: 2px;
font-weight: bold;
font-size: 12px;
padding-bottom: 4px;
padding-top: 2px;
font-family: Verdana, Arial, Helvetica;
}
.menu {
padding-left: 2px;
font-weight: normal;
font-size: 12px;
padding-bottom: 4px;
padding-top: 2px;
font-family: Verdana, Arial, Helvetica;
padding-right: 0px;
display: none;
}
.menulist {
padding-left: 2px;
font-weight: normal;
font-size: 12px;
padding-bottom: 4px;
padding-top: 2px;
font-family: Verdana, Arial, Helvetica;
}
//--></style>
<script language="javascript"><!--
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url(img/plus.gif)" : "url(img/minus.gif)";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("MenuExpand", "HeadingExpand");
}
//--></script>
</head>
<body>
<ul id="menuList">
<li class="menubar"><a class="heading" id="HeadingExpand" href="#">Click
<ul class="menu" id="MenuExpand">
<li>Esto se Muestra al hacer click</li>
<li>Esto se Muestra al hacer click</li>
<li>Esto se Muestra al hacer click</li>
</ul>
</li>
</ul>
<ul id="menuList">
<li class="menubar"><a class="heading" id="HeadingExpand" href="#">Click
<ul class="menu" id="MenuExpand">
<li>Esto es lo que no consigo mostrar</li>
<li>Esto es lo que no consigo mostrar</li>
<li>Esto es lo que no consigo mostrar</li>
</ul>
</li>
</ul>
</body>
</html>