Si, si es posible, pero si no lo hice asi es por motivos de
Graceful degradation (Como rayos se dice eso en español?) Bueno, lo que puedes hacer es especificar en tus hojas de estilo height: 0px; eso ocultara el div. El problema es que si por alguno motivo el efecto no funciona no hay forma de mostrar el contenido.
Veras, cuando desarrollo efectos lo primero que hago es desarrollar la página de modo que se vea como se vera después de realizado el efecto, en este caso el div completamente extendido. Luego con javascript llevo la pagina al estado inicial, en este caso el div oculto. De esa manera me aseguro de que si el efecto no funciona, la pagina se mostrara tal como la desarrolle al principio, de modo que el usuario podrá ver todo el contenido.
Otra cosa que puedes hacer es poner el div oculto en la función init, para eso bastaría con agregar a dicha función la siguiente linea.
Código HTML:
infodiv.style.height = '0px';
Pero esto trae consigo otro problema. La función init se ejecuta hasta que la pagina se ha cargado completamente por lo que el div se vera extendido por lo menos por una fracción de segundo antes de ocultarse bruscamente lo cual se ve muy feo y es la razón por la que no lo hice asi.
A mi tampoco me gusta el hecho de que al cargar la pagina se vea el efecto. Pero no te preocupes, que ahora mismo estoy usando el efecto para poner un formulario de contacto que va en todas las paginas por lo que tengo que arreglar ese asunto ya que no me gusta como se ve el efecto al navegar entre paginas, pues cada que vas a otra sección te sale el @#$ efecto y después de un rato fastidia. Aun que mejor si preocúpate ya que al final creo que terminare usando ajax para cargar las secciones y si es así no tendré el problema del formulario, de cualquier modo si arreglo algo yo te aviso...