"Dynamic Navigation With DOM"
by  Mark McManus
Web Techniques, March 1998

Web Techniques grants permission to use these listings (and code)  for 
private or commercial use provided that credit to Web Techniques and 
the author is maintained within the comments of the source. For 
questions, contact editors@web-techniques.com. 

This file consists of the one listing accompanying Mark McManus' 
article in Web Techniques Magazine, titled "Dynamic Navigation With 
DOM".


LISTING ONE

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