al desplegar una celda que se cierre otra

susaninhax · #1 (**permalink**) 10/07/2006, 11:48

Buenas compañeros;

Necesito hacer un menú, que cuando pinches en un enlace o celda, se despliegue otra celda debajo, y si pinchas en una tercera, cuarta o quinta celda se cierre la que estaba abierta y que se abra la que acabas de pinchar.

Se os ocurre algún modo de hacerlo???? Sé como hacer para desplegar celdas, de hecho lo he sacado de este foro

pero no se como hacer que cuando pinche en otra cualquiera se cierre la que estaba abierta...

Os Doy las gracias de antemano,

Saludos a todoss compiss!!!

ludovico2000 · #2 (**permalink**) 10/07/2006, 12:21

Si puedes, pon la función que tienes ahora, a ver cómo la podemos completar.

susaninhax · #3 (**permalink**) 11/07/2006, 01:25

Holas ludovico2000;

Este es el código:

Código HTML:

<script>
function startmenu()
{
	document.getElementById('menu1').style.display = "none";
	document.getElementById('menu2').style.display = "none";
	document.getElementById('menu3').style.display = "none";
	document.getElementById('menu4').style.display = "none";
}

function menufunc(menuId)
{
	if(document.getElementById(menuId).style.display == "none")
	{
		startmenu();
		document.getElementById(menuId).style.display = "block";
	}
	else
	{
		startmenu();
	}
}

</script>
</head>
<body onLoad="javascript:startmenu()">
<table width="100%">
<tr>
<td valign="top" width="20%">

<a href="javaScript:menufunc('menu1')">Prueba1111</a>
<div id="menu1">
	- <a href='#'>Google</a><br>
	- <a href='#'>Ask Jeeves</a><br>
	- <a href='#'>AltaVista</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu2')">Prueba</a>
<div id="menu2">
	- <a href='#'>Check for updates</a><br>
	- <a href='#'>Request a script</a><br>
	- <a href='#'>Contact</a><br>
	- <a href='#'>this script</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu3')">submenu 3</a>
<div id="menu3">
	- <a href='#'>my site</a><br>
	- <a href='#'>my site</a><br>
	- <a href='#'>my site</a><br>
	- <a href='#'>my site</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu4')">submenu 4</a>
<div id="menu4">
	- <a href='#'>my site</a><br>
	- <a href='#'>my site</a><br>
	- <a href='#'>my site</a><br>
	- <a href='#'>my site</a><br>
</div>

</td>
</tr>
</table>

Ahora me funciona estupendamente, pero necesito hacer que el segundo nivel a parte de tener enlace a una página también abra un tercer nivel, y poner la llamada a la función en onclick , pero ocultar y desocultar el segundo nivel... digo tercer nivel..., y ahí si que ya no sé como hacerlo. Le estoy dando vueltas... ¿Se te ocurre o se os ocurre algo con esto????????????????????

Muchas Gracias por todo

SALUDOSS!!!

ludovico2000 · #4 (**permalink**) 11/07/2006, 02:09

Puedes hacer un segundo juego de funciones, teniendo cuidado con los nombres, que podría ser algo más o menos así:

<script>
function startmenu()
{
document.getElementById('menu1').style.display = "none";
document.getElementById('menu2').style.display = "none";
document.getElementById('menu3').style.display = "none";
document.getElementById('menu4').style.display = "none";
}

function startsubmenu1()
{
document.getElementById('submenu11').style.display = "none";
document.getElementById('submenu12').style.display = "none";
document.getElementById('submenu13').style.display = "none";
document.getElementById('submenu14').style.display = "none";
}

function menufunc(menuId)
{
if(document.getElementById(menuId).style.display == "none")
{
startmenu();
document.getElementById(menuId).style.display = "block";
}
else
{
startmenu();
}
}

function submenu1func(submenu1Id)
{
if(document.getElementById(submenu1Id).style.displ ay == "none")
{
startsubmenu1();
document.getElementById(submenu1Id).style.display = "block";
}
else
{
startsubmenu1();
}
}

</script>
</head>
<body onLoad="javascript:startmenu()">
<table width="100%">
<tr>
<td valign="top" width="20%">

<a href="javascript:menufunc('menu1')">Prueba1111</a>
<div id="menu1">
- <a href="javascript:submenu1func('submenu11')">Google </a><br>
<div id="submenu11">
- <a href='#'>sub cosa 1</a><br>
- <a href='#'>sub cosa 2</a><br>
- <a href='#'>sub cosa 3</a><br>
</div>
- <a href='#'>Ask Jeeves</a><br>
- <a href='#'>AltaVista</a><br>
</div>
<br>
<a href="javascript:menufunc('menu2')">Prueba</a>
<div id="menu2">
- <a href='#'>Check for updates</a><br>
- <a href='#'>Request a script</a><br>
- <a href='#'>Contact</a><br>
- <a href='#'>this script</a><br>
</div>
<br>
<a href="javascript:menufunc('menu3')">submenu 3</a>
<div id="menu3">
- <a href='#'>my site</a><br>
- <a href='#'>my site</a><br>
- <a href='#'>my site</a><br>
- <a href='#'>my site</a><br>
</div>
<br>
<a href="javascript:menufunc('menu4')">submenu 4</a>
<div id="menu4">
- <a href='#'>my site</a><br>
- <a href='#'>my site</a><br>
- <a href='#'>my site</a><br>
- <a href='#'>my site</a><br>
</div>

</td>
</tr>
</table>