PDA

Click to See Complete Forum and Search --> : Dynamic height for a Div

whoiskb
10-31-2003, 03:00 PM
I am trying to create a panel using a div, and I am also providing a method that allows the user to collapse and expand the div. I got this working pretty easily using the style.display='none' property but I want to do it a little bit differently. I want to create a smooth collapse effect and in order for me to do this I must be able to change the height of the div programatically.

Can anyone point me down a path to help me get started. I know I can use clientheight to get the height, but how do I change it so that this works in both IE6+ and NS6+ (this has been the tricky part)

Thanks
Kevin
Khalid Ali
10-31-2003, 03:12 PM
Here is a complete working example

<script type="text/javascript">
<!--
function Process(){
alert(document.getElementById("div_1").style.height)
document.getElementById("div_1").style.height="20px";
alert(document.getElementById("div_1").style.height)
}
//-->
</script>
</head>
<body>
<div id="div_1" style="border:1px solid red;"></div>

<form id="form1" action="" onsubmit="">
<input type="button" value="process" onclick="Process()"/>
</form>