13 de Junio de 2010 
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:
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>
