Blog and Web

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