<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>