les dejo el codigo:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> </head> <script type="text/javascript"> <!-- function mostrarDiv() { if(document.getElementById('iddiv').style.display=='none') { altura=0; //Colocamos el div al inicio para iniciar la apertura //Esto se hace, ya que puede ser que el div estubiera abierto y oculto document.getElementById('iddiv').style.height=altura+"px"; //mostramos el div para visualizar el movimiento document.getElementById('iddiv').style.visibility='visible'; document.getElementById('iddiv').style.display='block'; expandir(); }else{ altura=heightDiv; contraer(); } } // Funcion para expandir function expandir() { //Siempre y cuando la altura sera inferior al la altura maxima if(altura++<heightDiv) { document.getElementById('iddiv').style.height=altura+"px"; if((altura*100/heightDiv)>85) { //Cuando lleva mas del 85% de apertura, relentizamos un poco para que de sensacion de paro window.setTimeout ("expandir();", 20); }else{ window.setTimeout ("expandir();", 5); } } } // Funcion para contraer function contraer() { //Siempre y cuando la altura sera superior a 0 if(altura-->0) { document.getElementById('iddiv').style.height=altura+"px"; if((altura*100/heightDiv)<15) { //Cuando lleva menos del 15% de apertura, relentizamos un poco para que de sensacion de paro window.setTimeout ("contraer();", 20); }else{ window.setTimeout ("contraer();", 5); } } //Cuando llegue al final, esconedmos el div if(altura==0) { document.getElementById('iddiv').style.display='none'; document.getElementById('iddiv').style.visibility='hidden'; } } //--> </script> <body> <p><a href="javascript:mostrarDiv();">Mostrar/Esconder Div</a> <div id="iddiv" style="border:0px solid;overflow:hidden;"> <div style="padding:5px;"> hola <br />hola2 <br />hola3 <br />hola4 </div> </div> </body> <script type="text/javascript"> <!-- //cogemos la altura actual del div var heightDiv=document.getElementById('iddiv').offsetHeight; //Iniciamos con el div escondido //Lo hacemos a posteriori para poder coger el tamaño del div... document.getElementById('iddiv').style.display='none'; --> </script> </body> </html>