Hola carmen andaba buscando algo parecido a lo que estás intentando hacer, probé tu script y la verdad es que me ha venido bien ¡! jejejejejeje yo soy mas de php y tengo problemillas la verdad para aclararme con js, si consigues terminarlo ¿podrías postearlo aqui? si consigo hacer que funcione yo tb lo pondre. un saludo.
Aui te dejo el que estaba haciendo yo, pero claro, el tuyo con el timeout se queda mucho mas bonito que el mio, y aun no le apliqué el tamaño ni nada, es un tamaño fijo de un div dentro de otro que es el que se oculta y muestra.
Código HTML:
<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 href="#" 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>
<div>hola que pasa esto es una prueba a ver si se desplaza</div>