<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
http://www.lawebdelprogramador.com
-->
<html>
<head>
<title>Mostrar/Ocultar div en scroll</title>
<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>
</head>
<body>
<div>
<h1>Mostrar/Ocultar div en scroll</h1>
<a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
</div>
<p>
<div><a href="javascript:mostrarDiv();">Mostrar/Esconder Div</a></div>
<div id="iddiv" style="border:1px solid;overflow:hidden;">
<div style="padding:5px;">
hola
<br />hola2
<br />hola3
<br />hola4
</div>
</div>
<div>Texto a continucación del div...</div>
</p>
</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>
</html>