CSS Hidden Div

Fig 1 (Click to Enlarge)

Fig 2 (Click to Enlarge)

I got a request to do a little hidden div that would appear (and push the rest of the content down) just like it works now in gmail when you click the show search options link.

Its really just a case of setting the div style display to 'none' and calling a javascript method to switch it to 'block'.

Don't forget if you want to toggle between visibility of the item (without moving other content on the page) you would use visibility:hidden|visible.

So here is the link and javascript call from Fig1.
<a href="javascript:showOptions()">Show Search Options</a>
<script language="javascript">
function showOptions() {
document.getElementById("searchOptions").style.display='block';
document.getElementById("searchOptionsTitle").style.display='block';
}
function hideOptions() {
document.getElementById("searchOptions").style.display='none';
document.getElementById("searchOptionsTitle").style.display='none';
}
</script>
Fig 2 is initially hidden and once Show Search Options is clicked, it appears.
Here is the css:
#searchOptions {
display:none;
border:3px solid #77db81;
background-color:#b7edbc;
margin:0 10px 20px 10px;
padding:5px;
}
#searchOptionsTitle {
display:none;
margin:10px 10px 0 100px;
border-top:3px solid #77db81;
border-left:3px solid #77db81;
border-right:3px solid #77db81;
background-color:#77db81;
font-weight:bold;
line-height:20px;
}
Here is the html:
<div id="searchOptionsTitle">
Search Options
<div style="float:right;font-size:11px;line-height:20px;margin-right:5px;">
<a href="javascript:hideOptions()">Hide Search Options</a>
</div>
</div>
<div id="searchOptions">
<!-- Add components in a table -->
</div>