Need some help building an expanding div

Question

I need a expanding div where it initializes showing only the top 30x960 of a 300x960 image along with an 'expand' button in the upper left. Clicking on the expand button will 'slide' the div down to reveal the full image of 300x960. Clicking anywhere else, whether it's expanded or contracted, will take the user to an advertisers website. Any quick snippets out there I can build from?

Answer 1

Try something like this:

<div style="width:960px; height:30px; position:relative; overflow:hidden">
<a href="http://another/site/"&gt;&lt;img src="image.jpg" alt="" /></a>
<input type="button" value="Expand" style="position:absolute; left:10px; top:10px" onclick="expand(this)" />
</div>

<script type="text/javascript">
function expand(btn)
{
    btn.style.display='none';
    slide(btn.parentNode,30);
}

function slide(div,curHeight)
{
    if(curHeight==300)return;
    curHeight+=10;
    div.style.height=curHeight+'px';
    setTimeout(function(){slide(div,curHeight);},25);
}
</script>