<HTML>
<HEAD>
<TITLE>Dynamic Contents</TITLE>
<STYLE TYPE="text/css">
H1 { color:blue; font-size:18pt}
H2 { color:green; font-size:12pt }
H3 { font-size:8pt }
DIV.leveltwo { margin-left:0.5in }
DIV.levelthree { margin-left:0.5in }
</STYLE>
<SCRIPT Language="javascript">
<!--
function overHeadOne( el ){
el.style.color = "red";
el.style.textDecoration = "underline";
return;
}
function outHeadOne( el ){
el.style.color = "blue";
el.style.textDecoration = "none";
return;
}
function overHeadTwo( el ){
el.style.textDecoration = "underline";
return;
}
function outHeadTwo( el ){
el.style.textDecoration = "none";
return;
}
function closeTitle( el ){
var elParent = el.parentElement;
var numChildren = elParent.children.length;
var curChild = 0;
for( i = 0; i<numChildren; i++ ){
curChild = elParent.children(i);
if( curChild != el ){
if( curChild.style.display == "" )
curChild.style.display = "none";
else
curChild.style.display = "";
}
}
return;
}
function changeContent( cont ){
document.all.contentDIV.innerHTML = cont;
return;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV ID=tableCont STYLE="position:absolute; width:300">
<DIV>
<H1 onMouseOver="overHeadOne( this );"
onMouseOut="outHeadOne( this );"
onClick="closeTitle( this );">Header One ></H1>
<DIV CLASS=leveltwo STYLE="display:none">
<H2 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="closeTitle( this );">One ></H2>
<DIV CLASS=levelthree STYLE="display:none">
<H3 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for Another one');">Another
One</H3>
</DIV>
<DIV CLASS=levelthree STYLE="display:none">
<H3 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for Another two');">Another
Two</H3>
</DIV>
</DIV>
<DIV CLASS=leveltwo STYLE="display:none">
<H2 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for wo');">Two</H2>
</DIV>
</DIV>
<DIV>
<H1 onMouseOver="overHeadOne( this );"
onMouseOut="outHeadOne( this );"
onClick="closeTitle( this );">Another Heading ></H1>
<DIV CLASS=leveltwo STYLE="display:none">
<H2 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="closeTitle( this );">One ></H2>
<DIV CLASS=levelthree STYLE="display:none">
<H3 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for Another one');">Another
One</H3>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV ID="contentDIV" STYLE="position:absolute; top:25; left:310; width:300">
Click on Heading with Arrows to to see subheadings,
click on headings without arrows to see content.
</DIV>
</BODY>
</HTML>