Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] div oculto con javascrip

Estas en el tema de div oculto con javascrip en el foro de Javascript en Foros del Web. Hola a todos, tengo este problema y espero que puedan ayudarme, como se me complica la historia de los div ocultos y que al hacer ...
  #1 (permalink)  
Antiguo 21/11/2013, 04:03
 
Fecha de Ingreso: octubre-2012
Mensajes: 20
Antigüedad: 11 años, 6 meses
Puntos: 0
div oculto con javascrip

Hola a todos, tengo este problema y espero que puedan ayudarme, como se me complica la historia de los div ocultos y que al hacer clic aparezcan mostrando el contenido, encontré este scrip que hace lo que necesito ya que carga el contenido en forma oculta y no demora en la muestra final, el tema es que lo modifique un poco para que funcione como lo necesito, y lo que veo que en el modo "envivo" del dreamweaver funciona perfectamente como quiero, pero en el navegador (lo probe con firefox) no funciona.
Pongo codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<style type="text/css">
.mediumtitulo {
color: #0762CB;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
font-weight: bold;
}

ul, li {
list-style-type:none;
}
</style>

<script language="JavaScript" type="text/javascript">
function desplegar(id){
if(document.getElementById("desc_" + id).style.display=="none"){
document.getElementById("desc_" + id).style.display="block";
} else {
document.getElementById("desc_" + id).style.display="none";
}
}
</script>


</head>

<body>

<li><strong><a href="javascript: desplegar('a')" class="mediumtitulo">Titulo experimental 1</a></strong><br />
<div id="desc_a" style="display:none">

<li><strong><a href="javascript: desplegar('1')" class="mediumtitulo">Titulo º1"</a></strong><br />
<div id="desc_1" style="display:none">
Contenido 1</div>

<br />
</li>

<li><strong><a href="javascript: desplegar('2')" class="mediumtitulo">Titulo º2"</a></strong><br />
<div id="desc_2" style="display:none">
texto 2

</div><br />
</li>

<li><strong><a href="javascript: desplegar('3')" class="mediumtitulo">Titulo º3"</a></strong><br />
<div id="desc_3" style="display:none">

texto 3
</div><br />
</li>
</div>
</li>

<!-- separo -->

<li><strong><a href="javascript: desplegar('a2')" class="mediumtitulo">Titulo experimental 2</a></strong><br />
<div id="desc_a2" style="display:none">

<li><strong><a href="javascript: desplegar('12')" class="mediumtitulo">Titulo º1"</a></strong><br />
<div id="desc_12" style="display:none">
Contenido 1</div>

<br />
</li>

<li><strong><a href="javascript: desplegar('22')" class="mediumtitulo">Titulo º2"</a></strong><br />
<div id="desc_22" style="display:none">
texto 2

</div><br />
</li>

<li><strong><a href="javascript: desplegar('32')" class="mediumtitulo">Titulo º3"</a></strong><br />
<div id="desc_32" style="display:none">

texto 3
</div><br />
</li>
</div>
</li>




y aca continua la web
</body>
</html>


La idea es que aparezca "titulo experimental" tanto 1 como 2, y al hacer click en ellos despliega el contenido, que son otros títulos, y que a su ves al hacer click muestran el contenido.

como puse màs arriba, en el dreamweaver se ve barbaro, pero en el navegado no....

¿alguna idea?
Desde ya muchas gracias.
Rycky
  #2 (permalink)  
Antiguo 21/11/2013, 05:32
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 10 años, 5 meses
Puntos: 4
Respuesta: div oculto con javascrip

Hola ricky,

creo que el problema lo tienes, con las etiquetas de lista. Fíjate que el primer li, esta englobando a otro <li>. Diria que es por eso.

He probado tu código cerrando el primer item, y funciona correctamente.

Te lo copio aqui para que lo veas.


<li><a href="javascript: desplegar('a')" class="mediumtitulo">Titulo experimental 1</a></li>
<div id="desc_a" style="display:none">

<a href="javascript: desplegar('1')" class="mediumtitulo">Titulo º1"</a>
<div id="desc_1" style="display:none">
Contenido 1</div>



<li><strong><a href="javascript: desplegar('2')" class="mediumtitulo">Titulo º2"</a></strong><br />
<div id="desc_2" style="display:none">
texto 2

</div><br />
</li>

<li><strong><a href="javascript: desplegar('3')" class="mediumtitulo">Titulo º3"</a></strong><br />
<div id="desc_3" style="display:none">

texto 3
</div><br />
</li>
</div>
</li>

<!-- separo -->

Enspero que te sirva de ayuda.

Un saludo
  #3 (permalink)  
Antiguo 21/11/2013, 19:48
 
Fecha de Ingreso: octubre-2012
Mensajes: 20
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: div oculto con javascrip

Hola Jorcom, primeramente gracias por la respuesta, a esto que me copiastes le agregur el scrip pero no funciono, la dudad es: me estabas mostrando un parte o era el codigo complet entre <body>?
  #4 (permalink)  
Antiguo 22/11/2013, 05:59
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 10 años, 5 meses
Puntos: 4
Respuesta: div oculto con javascrip

Hola ricky,

te copie sólo un trozo de tu codigo modificado.
Te pongo aqui el trozo respectivo al titulo experimental1 y sus subtítulos.

<li><a href="javascript: desplegar('a')" class="mediumtitulo">Titulo experimental 1</a></li>
<div id="desc_a" style="display:none">

<a href="javascript: desplegar('1')" class="mediumtitulo">Titulo º1"</a>
<div id="desc_1" style="display:none">
Contenido 1</div>



<li><strong><a href="javascript: desplegar('2')" class="mediumtitulo">Titulo º2"</a></strong><br />
<div id="desc_2" style="display:none">
texto 2

</div><br />
</li>

<li><strong><a href="javascript: desplegar('3')" class="mediumtitulo">Titulo º3"</a></strong><br />
<div id="desc_3" style="display:none">

texto 3
</div><br />
</li>
</div>
</li>

<!-- separo -->

El otro sólo tienes que modificarlo y deberia funcionarte todo.


Un saludo.
  #5 (permalink)  
Antiguo 22/11/2013, 17:58
 
Fecha de Ingreso: octubre-2012
Mensajes: 20
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: div oculto con javascrip

Jorcom, muchas pero muchas gracias, funciono perfectamente, ahora me pongo a estudiarlo a ver donde estuvo mi falla, siguiendo tus pasos, te agradezco.... Saludos
Rycky

Etiquetas: funcion, html, oculto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:33.