<script type="text/javascript">
var step = 4;
function expandPanel()
{
var panel = document.getElementById('panel');
if ( panel.clientHeight < (panel.originalHeight-step))
{
//clientWidth
var h = panel.clientHeight + step;
panel.style.height = h+"px";
setTimeout("expandPanel()", 100);
}
else
{
panel.style.height = "";
var panelTitle = document.getElementById('panelTitle');
panelTitle.firstChild.nodeValue = 'Collapse';
}
}
function collapsePanel()
{
var panel = document.getElementById('panel');
if ( panel.clientHeight >= step)
{
var h = panel.clientHeight - step;
panel.style.height = h+"px";
setTimeout("collapsePanel()", 100);
}
else
{
panel.style.display = 'none';
var panelTitle = document.getElementById('panelTitle');
panelTitle.firstChild.nodeValue = 'Expand';
}
}
function changePanel()
{
var panel = document.getElementById('panel');
if (!panel.style.height ||
(panel.style.display == 'none'))
{
if (panel.style.display == 'none')
{
panel.style.display = '';
expandPanel();
}
else
{
panel.originalHeight = panel.clientHeight;
collapsePanel();
}
}
}
</script>
There is an empty string assigned to the height
and display
CSS properties (via CSSOM).
What does it mean in this case?
All it does is just wipes out that CSS property. If the style attribute looked like this before:
It will now look like this: