Heres the prototype of the accordion where i demonstrate how the top div slowly closes down.
_______________________________________________________________________________
<html>
<style>
*{margin:4px;}
</style>
<script>
function loaded(){
var cont = document.getElementById("containerId");
var e1 = document.getElementById("heading1");
var e2 = document.getElementById("heading2");
var e3 = document.getElementById("heading3");
//h1= 2+e1.offsetHeight + e1.style.paddingTop + e1.style.marginTop;
alert("moving up:; "+ e1.style.height);
//e2.style.top=-h1;
removeDiv(e1,9999);
}
function removeDiv(e,currheight){
var newHeight = parseInt(e.offsetHeight/1.5);
e.style.overflow='hidden';
if(newHeight < currheight){
e.style.height=newHeight;
}else{
e.style.display='none';
return;
}
setTimeout(function(){removeDiv(e,newHeight)},50);
}
</script>
<body onload="loaded()" >
<div style="position:relative;display:auto; border:black 1px solid;overflow:auto;height:auto;"id="containerId">
<div style="position:relative;border:red;padding:5;">
top one heading
<div id="heading1" style="position:relative;border:purple 1px solid; top:2px;widht:100%;background:red;">
<ul>
<li>one </li>
<li>one </li>
<li>one </li>
</ul>
</div>
</div>
<div id="heading2" style="position:relative;border:purple 1px solid; top:2px;widht:100%;">
<ul>
<li>two </li>
<li>two </li>
<li>two </li>
<li>two </li>
</ul>
</div>
<div id="heading3" style="position:relative;border:purple 1px solid; top:2px;widht:100%;">
<ul>
<li>theree </li>
<li>theree </li>
<li>theree </li>
<li>theree </li>
</ul>
</div>
</div>
</body>
</html>
_______________________________________________________________________________
So this is how it looks like when running…
| first u get the alert. The top div is marked in red |  |
| on click of ok; the top div (with content one, one, .. ) slowly closes down |  |
| once the top div goes very small we make its display as none |  |
No comments:
Post a Comment