Mostrar ocultar div. Problemilla

Citar

Escrito el 12 Oct 2012 09:52 am

Hola,

Con este código consigo mostrar/ocultar un div haciendo clic en otro. El div esta oculto por defecto, pero para que aparezca, la primera vez hay que hacer doble clic. Luego se muestra/oculta con un clic.

¿Sabéis qué hay que hacer para que aparezca la primera vez solo con un clic?

He estado cambiando las combinaciones 'ele.style.display' a 'none' 'block', pero no consigo que funcione.

Código Javascript :

   <script language="JavaScript"> //
   function toggle(showHideDiv, switchTextDiv){
      var ele = document.getElementById(showHideDiv);
      var text = document.getElementById(switchTextDiv);
      if(ele.style.display == "none"){
         ele.style.display = "block";
      }
      else{
         ele.style.display = "none";
      }
   }
   </script>

Código HTML :

<div id="content">Contenido para mostar/ocultar</div>
<div><a id="header" href="javascript:toggle('content','header');" >Botón</a></div>

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 12 Oct 2012 12:13 pm

Proba poniendo el display none en los estilos en linea del div

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 12 Oct 2012 12:21 pm

No hay ningún problema con el código. ¿En qué navegador te sucede eso?.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 12 Oct 2012 06:44 pm

Muchas gracias...

He probado en safari, opera y firefox (todos en mac) y hace en todos lo mismo, hay que hacer doble click.

También he probado none en los divs, pero nada.

Os pongo el código completo simplificado, por si podéis probalo.

Código HTML :

<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="utf-8">

<style type="text/css">
  .examplecontainer{
  width:250px;
  height:52px;
  position:relative;
  overflow:auto;
  border:1px dotted #333;
  }
  .example{
  display:none;
  }
</style>
 
<script language="JavaScript">
   function toggle(showHideDiv, switchTextDiv){
      var ele = document.getElementById(showHideDiv);
      var text = document.getElementById(switchTextDiv);
      if(ele.style.display == "none"){
      ele.style.display = "block";
      }
      else{
         ele.style.display = "none";
      }
   }
</script>
 
</head>

<body> 

<div class="definition">
 <div class="examplecontainer">
  <div><a id="header" href="javascript:toggle('content','header');">Lorem</a></div>
  <div class="example" id="content">Lorem Ipsum</div>
 </div>
</div>

</body>
</html>

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 Oct 2012 12:36 pm

Cambia la condición del if:

Código Javascript :

      if(ele.style.display == "block"){
      ele.style.display = "none";
      }
      else{
         ele.style.display = "block";
      }

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 13 Oct 2012 05:50 pm

Vale... ahora lo entiendo. Como en css he puesto 'none' en javascript hay que empezar por 'block'.

Muchas gracias

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Mostrar ocultar div. Problemilla

Escribe una respuesta rapida