Put this in the <head></head> tags:
<script>
function ShowHide(elementName) {
var HeaderElement = null;
var BodyElement = null;
delCookie(elementName);
if(document.getElementsByName) {
HeaderElement = document.getElementsByName(elementName+"Header");
BodyElement = document.getElementsByName(elementName+"Body");
if(BodyElement) {
if(BodyElement[0].style.display == "none") {
setCookie(elementName,'show');
BodyElement[0].style.display = "block";
HeaderElement[0].className = "ListNuggetHeader";
} else {
delCookie(elementName);
BodyElement[0].style.display = "none";
HeaderElement[0].className = "ListNuggetHeaderClosed";
}
}
}
window.event.cancelBubble = true;
return false;
}
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
function delCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
</script>
<style>
.ListNuggetHeader {
WIDTH: 100%; CURSOR: hand;
}
.ListNuggetHeaderClosed {
WIDTH: 100%; COLOR: black;
}
.ListNuggetBody {
PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px;
}
.ListNuggetUpButton {
DISPLAY: none
}
.ListNuggetDownButton {
}
</style>
and then wherever you want to place a show/hide menu add this:
<!-- Drop Down Menu Container -->
<DIV>
<DIV style="WIDTH: 100%">
<TABLE class="ListNuggetHeader" cellSpacing="0" cellPadding="0" border="0" width="100%" id="calHeader" name="calHeader">
<TR>
<TD onclick="ShowHide('cal');">
DROP DOWN TITLE HERE
</TD>
</TR>
<TR>
<TD width="100%">
<script>
menuView=(getCookie('cal')=="show")?"block":"none";
document.writeln ("<DIV style='display:" + menuView + ";' id='calBody' name='calBody'>")
</script>
<DIV>
<TABLE class="ListNuggetBody" cellSpacing="0" cellPadding="0" border="0">
<TR>
<TD>
Drop Down Stuff Here
</DIV>
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</DIV>
<!-- Drop Down Menu Container -->
you have to uniquely identify the red areas. the css can be modified for your needs, but that is the basics that are required.