Problema con DIVS

[chriz]

Tengo la siguiente situación, trato de hacer un miniapartado de una pagina web sencilla, en la que necesito utilizar varios DIVS 'anidados' por así decirlo.

este es el script que tengo

Código:

<script>
function mostrar(id) {
  obj = document.getElementById(id);
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>

y esto tengo en el body

Código:

<UL>

<LI> <FONT SIZE=4> <a href="#" onclick="mostrar('divTexto1'); return true" /> 
<FONT FACE="Calibri"> <FONT COLOR="#FFFFFF">Corporativo</a>
<div id="divTexto1" style="visibility:hidden"> 


<UL>
<LI> <FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1a'); return false" />  
<FONT FACE="Calibri"> <FONT COLOR="#FFFFFF">Operación</a>
<div id="divTexto1a" style="visibility:hidden"> 
Procedimiento/Política1 <BR>
Procedimiento/Política2 
</div>
</UL>

<UL>
<LI> <FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1b'); return false" />  
<FONT FACE="Calibri"> <FONT COLOR="#FFFFFF">Sistemas</a>
<div id="divTexto1b" style="visibility:hidden"> 
Procedimiento/Política1 <BR>
Procedimiento/Política2 
</div>
</UL>

<UL>
<LI> <FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1c'); return false" />  
<FONT FACE="Calibri"> <FONT COLOR="#FFFFFF">Otros</a>
<div id="divTexto1c" style="visibility:hidden"> 
Procedimiento/Política1 <BR>
Procedimiento/Política2 
</div>
</UL>
</UL>

esto es lo que despliega al principio

Código:

Corporativo
       Operacion

       Sistemas

       Otros

y al dar clic en cualquiera de las opciones me aparecen otros apartados quedando así:

Código:

Corporativo
         Operacion
               Política # 1
               Política # 2
         Sistemas   
               Política # 1
               Política # 2
         Otros 
               Política # 1
               Política # 2

mi problema es que si yo despliego el texto de cada uno de los DIVS , pero, quiero cerrar todos los DIVS dando clic en 'corporativo' no desaparece todo, me queda de la siguiente manera:

Código:

Corporativo
     
               Política #1
               Política #2

               Política #1
               Política #2
 
               Política #1
               Política #2

es decir unicamente desaparecen los DIVS pertenecientes a 'operacion' 'sistemas' y 'otros' y para quitar los textos de políticas necesito dar clic en cada uno de los 3 que mencioné =S

les agradecería su ayuda mucho
si necesito colocar algun otro dato háganmelo saber!

[crujikoki]

Hola,

A ver, el problema que le veo yo es que a Procedimiento/Política1, no le cambias su visibilidad cuando se la quitas al div principal. Osea, cuando haces:

mostrar('divTexto1');

Te he modificado un poco el script para que veas a lo que me refiero.

Código Javascript:

<script type="text/javascript">
function mostrar(id) {
 
    obj = document.getElementById(id);
    obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
  
    if(id=="divTexto1" && obj.style.visibility=="hidden")
    {
        mostrar("divTexto1a");
        mostrar("divTexto1b");
        mostrar("divTexto1c");
    }
 
}
</script>
 

Ya te digo que es solo para que veas el por que te pasa lo que te pasa, pero evidentemente se puede mejorar. Cualquier cosa postea.

Saludos!!

[chriz]

gracias CRUJIKOKI, me ha servido lo que respondiste y creo que estoy casi apunto de solucionarlo!