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...

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. 
   
3. document.getElementById('contenido_oculto').style.display = 
4. (document.getElementById('contenido_oculto').style.display == 
5. 'none') ? 'block' : 'none'; 
6. document.getElementById('texto').innerHTML = 
7. (document.getElementById('texto').innerHTML==
8. 'Mostrar')?'Ocultar':'Mostrar';
9. };

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. 
   
3. <div id="contenido_oculto">
4. <p>Este contenido estaba oculto<br />Pulsa ocultar y desaparecerá</p>
5. </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.