I'm having trouble figuring out how to keep a panel collapsed upon startup.
It's driving me crazy!

Here's the HTML, followed by the jscript, followed by the css:

<html>
<head>
<link type="text/css" rel="stylesheet"
href="Animated-Collapsible-Panel-5.css" />
<script language="javascript" type="text/javascript"
src="Animated-Collapsible-Panel-5.js"></script>
</head>
<body>
<!-- Animated collapsible panel, with separate CSS and JavaScript -->
<div style="width:470px;">
<div class="squarebox"><div
class="squareboxgradientcaption"
style="height:20px; cursor: pointer;"
onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div
style="float: left">I bequeath myself to the dirt to grow from the grass I love...</div><div
style="float: left; vertical-align: left"><img
src="../images/collapse.gif"
width="25" height="5" border="0"
alt="Show/Hide" title="Show/Hide"/></div>
</div><div class="squareboxcontent">
<img width="150" height="150"
src="http://www.lesliehawes.com/wordpress/wp-content/uploads/2008/09/chief-joseph-pendleton-blanket-pattern.jpg"
alt="This is an image" title="This is an image" /><br />Content goes here...</div>
</div>
<img width="170" height="0" alt="" src="../images/shadow.gif" />
</div>
</body>


</html>



// not animated expand/collapse
function togglePannelStatus(content)
{
var expand = (content.style.display=="none");
content.style.display = (expand ? "block" : "none");
toggleChevronIcon(content);
}

// current animated collapsible panel content
var currentContent = null;

function togglePannelAnimatedStatus(content, interval, step)
{
// wait for another animated expand/collapse action to end
if (currentContent==null)
{
currentContent = content;
var expand = (content.style.display=="none");
if(expand)
content.style.display = "block";
var max_height = content.offsetHeight;

var step_height = step + (expand ? 0 : -max_height);
toggleChevronIcon(content);

// schedule first animated collapse/expand event
content.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ interval + "," + step
+ "," + max_height + "," + step_height + ")", interval);
}
}

function togglePannelAnimatingStatus(interval,
step, max_height, step_height)
{
var step_height_abs = Math.abs(step_height);

// schedule next animated collapse/expand event
if (step_height_abs>=step && step_height_abs<=(max_height-step))
{
step_height += step;
currentContent.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ 2 + "," + 2
+ "," + max_height + "," + step_height + ")", interval);
}
// animated expand/collapse done
else
{
if (step_height_abs<step)
currentContent.style.display="none";
currentContent.style.height = "";
currentContent = null;
}
}

// change chevron icon into either collapse or expand
function toggleChevronIcon (content)

{
var chevron=content.parentNode
.firstChild.childNodes[1].childNodes[0];
var expand=(chevron.src.indexOf("expand.gif")>0);
chevron.src=chevron.src
.split(expand ? "expand.gif" : "collapse.gif")
.join(expand ? "collapse.gif" : "expand.gif");
}




.squarebox {
width: 215%;

text-align: center;
overflow: hidden; }
.squareboxgradientcaption {
color: #ffffff;
padding: 5px;
background-image: url( );
background-repeat: repeat-x; }
.squareboxcontent {
background-color: #f5f5f5;
padding: 10px;
overflow: hidden;
border-top: solid px #336699; }