in the "expanded" form
FrontPage
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }
function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none";
document.getElementById("tick_"+theID).innerHTML = "+"; }
else { document.getElementById(theID).style.display = "block";
document.getElementById("tick_"+theID).innerHTML = "-"; } }
// -->
</script>
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><b><span id="tick_a1">+</span> 1] Example & Explanation:</b></div>
<div id="a1" class="texter" style="width: 753; height: 80">
<p style="margin-left: 20; margin-top: 0;margin-bottom: 0"> This is the hidden text that was revealed when the header was clicked. Such hidden texts are mostly
related to the main header which opens them. You can add any number of collapsible headers.
</p>
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer">
<p style="margin-top: 0; margin-bottom: 0"><span id="tick_a1">
<b>- Close "Example & Explanation"</b></span></div>
</div>
<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer">
<p style="margin-top: 0; margin-bottom: 0"><b><span id="tick_a2">+</span> 2] Notes:</b></div>
<div id="a2" class="texter">
<p style="margin-left: 20; margin-top: 0; margin-bottom: 0">This script works with all the newer versions of browsers like IE5+, NS6, Opera and also Firefox.<br />
This script does not work with older browsers like NSv4.x but degrades very well.
</p>
<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><span id="tick_a2">
<b>- Close "Notes"</b></span></div>
</div>
</head>
<body>
</body>
</html>