Expandable subject headings
Free javascript	[One of a collection of free javascripts from www.technorealm.co.uk]

This script only works in IE, it display as a standard listing (i.e. non expandable/collapsing) in Netscape.

Click a heading below to see it work. Once you're familiar with how it works, you'll find you can nest the dropdowns, and even apply the effect to other tags. Just remember to keep the ID 's unique.

Add this style definition first. Change it to suit your page style.

<STYLE>
  .Outline { cursor: hand;font-family:Verdana,Arial,Helvetica,san-serif;font-size:8pt}
</STYLE>

Here's the script

<SCRIPT LANGUAGE="Javascript">
<!--  
function OutlineClick()
  {
    var Source, Targets, i;
    Source = window.event.srcElement;
    if( Source.className == "Outline" )
    {
      Targets = document.all(Source.id).children;
      if( Targets.length != 0 && Targets[0].style.display == "none")
        Expand( Source.id );
      else
        Collapse( Source.id );
      window.event.cancelBubble = true;
    }
  }
  function Expand( Level )
  {
    var i, Target;
    i = 1;
    Target = document.all( Level + i.toString() );
    while( Target != null )
    {
      Target.style.display = "";
      i++;
      Target = document.all( Level + i.toString() );
    }
  }
  function Collapse( Level )
  {
    var i, Target;
    if( document.all( Level ).children.length == 0 )
      return false;
    else
    {
      i = 1;
      Target = document.all( Level + i.toString() );
      while( Target != null )
      {
        Collapse( Target.id );
        Target.style.display = "none";
        i++;
        Target = document.all( Level + i.toString() );
      }
    }
  }
// -->
</SCRIPT>
<STYLE>
  .Outline { cursor: hand }
</STYLE>

And here's how its applied in the page HTML to get the above effect.

<DIV onClick="OutlineClick();">
<DL ID="O" CLASS="Outline" >
     Option 1
<DL ID="O1" CLASS="Outline" STYLE="display: none">
   <DT><a href="LINK1">link1</a>
		<DD>DESCRIPTION OF LINK1
    	<DT><a href="LINK2">link2</a>
		<DD>DESCRIPTION OF LINK2
	<DT><a href="LINK3">link3v/a>
		<DD>DESCRIPTION OF LINK3
       </DL>
   </DL>
</DL>
</DIV>

<DIV onClick="OutlineClick();">
   <DL ID="1" CLASS="Outline" >
     Option 2
       <DL ID="11" CLASS="Outline" STYLE="display: none">
       <DT><a href="LINK1">link1</a>
		<DD>DESCRIPTION OF LINK1
    	<DT><a href="LINK2">link2</a>
		<DD>DESCRIPTION OF LINK2
	<DT><a href="LINK3">link3</a>
		<DD>DESCRIPTION OF LINK3
        </DL>
   </DL>
</DL>
</DIV>

<DIV onClick="OutlineClick();">
  <DL ID="2" CLASS="Outline" >
       Option 2
  <DL ID="21" CLASS="Outline" STYLE="display: none">
	 <DT><a href="LINK1">link1</a>
		<DD>DESCRIPTION OF LINK1
    	<DT><a href="LINK2">link2</a>
		<DD>DESCRIPTION OF LINK2
	<DT><a href="LINK3">link3</a>
		<DD>DESCRIPTION OF LINK3
   </DL>
 </DL>
</DL>
</DIV>

www.technorealm.co.uk UK Web site design and graphics. A free resources site!