Significado de un Script

[chriz]

Bueno este es un script que encontré en la red y es para aparecer y desaparecer divs a la hora de clickear, mas siendo sincero no lo comprendo del todo, más que nada por la sintaxis

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

cuál es el motivo? el siguiente:
yo tengo un div PADRE el cual tiene 3 hijos, y esos 3 hijos tienen sus propios hijos (en cantidades diferentes) a los cuales llamaré nietos por solo mencionarlos, el problema es que no puedo controlar a los divs nietos desde el div padre, es decir, quiero desaparecer los divs hijos y los divs nietos al mismo tiempo haciendo clic en el div padre, pero solo me desaparecen los hijos, quedando los divs nietos a la vista

este es un ejemplo del codigo

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

<FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1a')"; return false" />
<FONT FACE="Calibri"> <DIV id="bloque0a"> <LI> <FONT COLOR="#FFFFFF"> Operación </a> </DIV>
<div id="divTexto1a" style="visibility:hidden">

<DIV id="bloque0b"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política1 </A> </DIV> <BR>
<DIV id="bloque0c"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política2 </A> </DIV>
</div>

<FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1b')"; return false" />
<FONT FACE="Calibri"> <DIV id="bloque0d"> <LI> <FONT COLOR="#FFFFFF"> Sistemas </DIV> </a>
<div id="divTexto1b" style="visibility:hidden">

<DIV id="bloque0e"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política1 </A> </DIV> <BR>
<DIV id="bloque0f"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política2 </A> </DIV>
</div>

<FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1c')"; return false" />
<FONT FACE="Calibri"> <DIV id="bloque0g"> <LI> <FONT COLOR="#FFFFFF"> Otros </DIV> </a>
<div id="divTexto1c" style="visibility:hidden">

<DIV id="bloque0h"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política1 </A> </DIV> <BR>
<DIV id="bloque0i"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política2 </A> </DIV>

</div>
</UL>
</div>

ejemplo visual

Corporativo ---> DIV PADRE

Operación ---> 1er DIV HIJO DE CORPORATIVO

Política1 ----> Hijo de Operación
Política2 ----> Hijo de Operación {Nietos de corporativo}


Sistemas -----> 2do DIV HIJO DE CORPORATIVO

Política1 ---> Hijo de Sistemas
Política2 ---> Hijo de Sistemas {Nietos de corporativo


Otros ---------> 3er DIV HIJO DE CORPORATIVO

Política1 ---> Hijo de otros
Política2 ---> Hijo de otros {Nietos de corporativo}

ya había posteado este problema hace algunos días y me respondieron algo que creí entender pero la verdad al último no fué así y poes quisiera volver a pedir su ayuda

gracias

[InvitadoDDD]

Ten cuidado con los tag de cierre.. se mas ordenado con tu codigo.. ok. :)
Prueba con este codigo.

function mostrar(id) {
obj = document.getElementById(id);
obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
if(obj.style.visibility == 'hidden')
{
divTexto1a.style.visibility='hidden';
divTexto1b.style.visibility='hidden';
divTexto1b.style.visibility='hidden';
divTexto1c.style.visibility='hidden';
}
}


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

<FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1a')"; return false" />
<FONT FACE="Calibri"> <DIV id="bloque0a"> <LI> <FONT COLOR="#FFFFFF"> Operación </a></font> </DIV>
<div id="divTexto1a" style="visibility:hidden">

<DIV id="bloque0b"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política1 </A> </DIV> <BR>
<DIV id="bloque0c"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política2 </A> </DIV>
</div>

<FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1b')"; return false" />
<FONT FACE="Calibri"> <DIV id="bloque0d"> <LI> <FONT COLOR="#FFFFFF"> Sistemas </a></font></DIV>
<div id="divTexto1b" style="visibility:hidden">

<DIV id="bloque0e"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política1 </A> </DIV> <BR>
<DIV id="bloque0f"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política2 </A> </DIV>
</div>

<FONT SIZE=3> <a href="#" onclick="mostrar('divTexto1c')"; return false" />
<FONT FACE="Calibri"> <DIV id="bloque0g"> <LI> <FONT COLOR="#FFFFFF"> Otros</FONT></DIV> </a>
<div id="divTexto1c" style="visibility:hidden">

<DIV id="bloque0h"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política1 </A> </DIV> <BR>
<DIV id="bloque0i"> <A href="prueba.docx"> <FONT COLOR="#7093DB"> Procedimiento/Política2 </A> </DIV>
</div>


</div>
</UL>

----------------------------------------------------------------------------
Espero haber soucinado tu problema... para que web es?? asp.net ?

Saludos.

[chriz]

Funcionó muy bien INVITADODDD, pero presentó un detalle, ala hora de clickear, si lo haces en un lugar de abajo de la pantalla normal, me manda hasta arriba de nuevo de la pantalla

es decir, tengo varios apartados del mismo modo, solo que algunos poes obviamente ocupan un lugar abajo de otros, y al clickear en cualquiera de ellos hace que el scroll se recorra hacia arriba!

muchas gracias por tu ayuda