Javascript

Ocultar o mostrar un DIV con Javascript

A veces queremos que cierto contenido tenga la opción de ocultar y de volver a mostrar, como puede ser el caso de los comentarios, mediante Javascript y un «DIV» te mostraremos como hacerlo.

Primero haremos uso de una función, para esto tienes que definirla entre las etiquetas <head></head> o hacer el llamado a la función externa en un archivo .js. La función es la siguiente:


<script>

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre de la etiqueta DIV que deseamos mostrar */
}
</script>

Como se indica en el código, la instrucción «window.onload» predetermina un estado oculto de DIV, esto es, que estará oculto hasta que se llame de nuevo a la función «muestra_oculta». Si quieres que se muestre el DIV de forma predeterminada solo elimina esa instrucción.

La forma de usarla es simplemente, se hace un llamado a la función mediante un link:


<a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')">Mostrar / Ocultar</a>

Esto mostrará/ocultará todo lo que estre entre las etiquetas <div id=»contenido_a_mostrar»></div>.

Te mostramos el ejemplo completo:


<html>
<head>

<title>Muestra oculta</title>

<script language="JavaScript">

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
</script>
</head>

<body>

<!--Al hace llamado a la función solo tienes que idicar el nombre del DIV entre parentesis -->
<p><a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')" title="">Mostrar / Ocultar</a></p>

<div id="contenido_a_mostrar">
<p>Este contenido tiene que mostrarse con el link</p>
</div>

</body>
</html>

Descarga la función y el ejemplo

3 Comentarios

  • Hola.
    He implementado esta función a mi blog y me he encontrado con un problema. No puedo añadirlo en más de una entrada ya que el div afecta a todas por igual y solo una se oculta. O se muestran todas. ¿Habría alguna manera de aplicar la etiqueta a más de un post seguido?
    Muchas gracias.
    Un saludo!

  • Hola!
    Queria saber si existe la posibilidad de ocultar algun contenido de una entrada y que se active unicamente cuando uno publica un comentario. Saludos y gracias!