DOM-display.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>HTML 4.01: Attributes</title><style type="text/css"><!--body {padding-top: 19px;}table.leaf {border: 1px solid #C0C0D0; border-width: 2px 2px 4px 6px; margin: 0; padding: 0; border-collapse: separate; border-spacing: 0 1px; width: 100%;}table.leaf td, table.leaf th {font-size: 12px; padding: 0; vertical-align: top; background-color: #E8E8E8;}table.leaf th {font-weight: normal; padding: 0 2px; background-color: #D0D0E0;}--></style><script type="text/javascript"><!--// Special thanks to Martina Kosloff for giving me the idea to do this//  to Marcio Galli for writing the DevEdge examples I adapted//  and to Bob Clary for helping me make the whole thing work//function GetElementsWithClassName(elementName,className) {	var allElements = document.getElementsByTagName(elementName);	var elemColl = new Array();	for (i = 0; i< allElements.length; i++) {		if (allElements[i].className == className) {			elemColl[elemColl.length] = allElements[i];		}	}	return elemColl;}function MaKo() {// named for Martina Kosloff, who had the idea to present the tab in this way// "Nice shark... pretty shark..."  -- Londo Mollari, 'Babylon 5'//	var n;	var tableColl = GetElementsWithClassName('table','leaf');	for (n = 0; n < tableColl.length; n++) {		tableColl[n].style.display = 'none';	}}function leafTurn(leafName,leafType) {	var myLeaf = document.getElementById(leafName);	var myArrow = document.getElementById(leafName+'Turn');	if (myLeaf.style.display == 'none') {		myLeaf.style.display = leafType;	} else {		myLeaf.style.display = 'none';	}//	alert(leafName + ": " + myLeaf.style.display);}//--></script></head><body onLoad="MaKo();"><a href="javascript:" onclick="leafTurn('test1','block'); return false">test1</a><a href="javascript:" onclick="leafTurn('test2','table'); return false">test2</a><hr><table class="leaf" id="test1"><tr><td>test 1 -- block</td></tr></table><hr><table class="leaf" id="test2"><tr><td>test 2 -- table</td></tr></table></body></html>