martes, 29 de mayo de 2018

Mostrar ocultar un div con javascript

Hoy vamos a ver como se puede insertar contenido dentro de una etiqueta div y que ese contenido pueda estar oculto o visible.
Veamos como hacerlo...


Mostrar/ocultar un div con javascript


Lo primero que vamos a hacer es crear una función, en este caso la llamaré mostrarocultar, dentro de la función le decimos que el div 'contenido_oculto' no se muestre, y el span 'texto' muestre la palabra Mostrar


  1. function mostrarocultar(){

  2. document.getElementById('contenido_oculto').style.display = 
  3. (document.getElementById('contenido_oculto').style.display == 
  4. 'none') ? 'block' : 'none'; 
  5. document.getElementById('texto').innerHTML = 
  6. (document.getElementById('texto').innerHTML==
  7. 'Mostrar')?'Ocultar':'Mostrar';
  8. };



Para que inicie la función con la cara de la página, agregamos el siguiente código.

  1. window.onload = function(){
  2. mostrarocultar();
  3. }



Y por último, creamos el enlace, donde daremos clic para mostrar/ocultar el contenido, y también el div donde pondremos el contenido.



  1. <p><a style='cursor: pointer;' onclick="mostrarocultar()"><span id="texto"></span></a></p>

  2. <div id="contenido_oculto">
  3. <p>Este contenido estaba oculto<br />Pulsa ocultar y desaparecerá</p>
  4. </div>


Y como siempre os comento, esto puede mejorar su aspecto con estilos css.



Os dejo esta muestra para que veáis como funciona.



Este contenido estaba oculto
Pulsa ocultar y desaparecerá







Espero que haya sido útil.


Un saludo.

No hay comentarios:

Publicar un comentario

Para insertar código html en tu comentario,convertir aquí