Shrinking then Restoring height of a <div>

Click once, the div shrinks, click again and it's back to normal size

[daisetsu]

The code I've written works in firefox but not IE.

By the looks of it you can figure that it's trying to save the old height as a variable, then make the div smaller and cut off any overflow.
Another click restores the div to it's origional state.

Why is this not working in IE? I know by placing breakpoints that the problem is with the line where it sets the height. I just dont know what to do to fix it.

if(Panel1_outer.style.overflow!= "hidden")
{
oldHeight = Panel1_outer.style.height;
Panel1_outer.style.overflow = "hidden";
document.getElementById('Panel1_outer').style.height = "32px";
}
else
{
Panel1_outer.style.height = oldHeight;
Panel1_outer.style.overflow = "visible";
}

EDIT: It appears that the height is being set, I used an alert and it showed 32px, for some reason the button just disappers after changing it's height.

[Dabrowski]

Which line where it sets the height? The one where it sets to 32px or the one where it sets it back?

ok, 2 questions and 1 advisory.

Is oldHeight a global variable, defined with a var oldHeight outside of any function or loop?

Why are you messing with overflow?

I wrote a colour changing progress bar which required a div to be shrunk beyond the size of the content without distorting the content in any way. I found the only way to do this was to wrap the whole thing in another div and change the size of that. I'll send you a sticky with a demo page.

[Dabrowski]

ok, forget that, found the problem:

oldHeight = Panel1_outer.style.height;

That is not the correct way to get the height of an element. In IE you have to use element.currentStyle.height, in FF you have to use getComputedStyle......

But the DOM gives us an easier way as it's only the height you require.

Try:

oldHeight = Panel1_outer.offsetHeight;

That should work cross browser.