Expanding and contracting outlines

This example produces expanding and contracting outlines. This allows you to have headings or short paragraphs on a page that expand to give more information when you click on them. It is a good way to save space; you can hide most of the content and give users the option to display only the information they want.

You need one style for the heading and one for the text that you want to expand, a JavaScript that does the clever stuff, and you need to assign the correct html to the heading and the expansion text.

This code does the trick:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Expanding and contracting headings</title>
<style type="text/css">
<!--
.parent {color :blue;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
font-weight: bold;
cursor: hand;}
.child {display: none;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
position: relative;}
-->
</style>

<script language="JavaScript">
<!--//
  function mouseon() {
    var el = event.srcElement;
    var thisclass = event.srcElement.className;
    if (thisclass=="parent") {
        el.style.color = "red";
    }
  }


  function mouseoff() {
    var el = event.srcElement;
    var thisclass = event.srcElement.className;
    if (thisclass=="parent") {
        el.style.color = "blue";
    }
  }  


  function swapDisplay() {     
    // Make sure a child element exists
    var child = event.srcElement.getAttribute("child");
    if (null!=child) {
      var el = document.all[child]
      if (null!=el)
        el.style.display = ""==el.style.display ? "block" : ""
    }
  }


  document.onclick = swapDisplay;
  document.onmouseover = mouseon;
  document.onmouseout = mouseoff;
//-->
</script>
</head>


<body text="#000000" link="#400080" 
vlink="#FF0000" alink="#00A000">


<h1 class="parent" child="out1">The heading</h1>
<div id="out1" class="child">
<p>The text that you want to appear when you expand 
the heading.</p>
</div>


<h1 class="parent" child="out2">The second heading</h1>
<div id="out2" class="child">
<p>The text that you want to appear when you expand the 
second heading.</p>
</div>


</body>
</html>

Try it and see.