modificar menu en forma de arbol

Gerifaltus · #1 (**permalink**) 02/11/2005, 19:51

en este link:
http://www.datafull.com/armatusitio/informe.php?id=111
se encuentra un menu en forma de arbol, de tal manera que al hacer clic en algun titulo se despliega.

el detalle es que de que manera se podria hacer que cuando se hiciera clic en algun titulo, se ocultara algun otro que haya sido desplegado anteriormente, es decir que se oculten automaticamente un titulo abierno cuando se abra un titulo nuevo. gracias de antemano.

en realidad estoy haciendo algo que despliega información parcial de alguna persona, y al hacer clic en un boton se despliega toda la información de la persona dentro de un div.
pero quisiera la funcionalidad arriba escrita para evitar hacer clic de nuevo en el boton que abrio el div con la información.

nota: anexo codigo.

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function detalle(bloque){
obj=document.getElementById(bloque);
obj.style.display=(obj.style.display=="none")?"":"none";
}
//-->
</script>

</head>
<input type="button" name="submit" value="persona1" onClick="detalle(1);">
<input type="button" name="submit" value="persona1" onClick="detalle(2);">
<body>
	<div id="1" style="display:none">
	<form name="form1" method="post" action="">
    <table align="center" cellpadding="2" cellspacing="0">
    <tr>
      <td colspan="2"><input name="txtEditorial" type="text" id="txtEditorial" size="40" value="persona1"></td>
    </tr>
	</table>
	</form>
	</div>

<div id="2" style="display:none">
	<form name="form1" method="post" action="">
    <table align="center" cellpadding="2" cellspacing="0">
    <tr>
      <td colspan="2"><input name="txtEditorial" type="text" id="txtEditorial" size="40" value="persona2"></td>
    </tr>
	</table>
	</form>
	</div>
</body>
</html>

gracias de antemano.

Gerifaltus · #2 (**permalink**) 05/11/2005, 17:21

que tal por fin encontre respuesta mi pregunta (sabia que estaba por aqui)

bien este es el code:

Código:

<html>
<head>
<style type="text/css">
.micapa {display:none}
</style>
<script type="text/javascript">
var capa=null;
function mostrar(c) {
  obj=document.getElementById(c);
  if(capa!=null)
    capa.style.display='none';
  obj.style.display='block';
	capa=obj;  
}
</script>
</head>
<body>
<a href="#" onclick="mostrar('capa1');return false">Capa 1</a>
<a href="#" onclick="mostrar('capa2');return false">Capa 2</a>
<div id="capa1" class="micapa">C1</div>
<div id="capa2" class="micapa">C2</div>
</body>
</html>

tomado de este ejemplo:
http://www.forosdelweb.com/f13/mostrar-ocultar-capas-278355/

.