[thelist] Jvascript expansion button not working in firefox, fine in IE and Opera

Sun Apr 16 05:04:16 CDT 2006

Hi,

Does anyone have any idea why this might not be working in firefox,
when it seems to work fine in the versions of opera and Internet
Explorer that I have? It is meant to be a javascript implementation of
an expansion button type thingy.  Code follows or you can look at a
more prettified version at http://simon.coolbananas.org.uk.

Thanks,

Simon.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Test Page</title>
	<script language="JavaScript" type="text/javascript">
		function showDetail(id){
			var el = document.getElementById("item_" + id);
			el.className = "show";
			var exp = document.getElementById("exp_" + id);
			exp.style.display = "none";
			var col = document.getElementById("col_" + id);
			col.style.display = "inline-block";
			/*col.style.width = "10px";
			col.style.height = "10px";*/
		}
		function hideDetail(id){
			var el = document.getElementById("item_" + id);
			el.className = "hide";
			var exp = document.getElementById("exp_" + id);
			exp.style.display = "inline-block";
			/*exp.style.width = "10px";
			exp.style.height = "10px";*/
			var col = document.getElementById("col_" + id);
			col.style.display = "none";
		}
	</script>
	<style>
		div.hide{display: none;}
		div.show{display: block;}
		span.expand{
		position: relative;min-width: 10px;min-height: 10px;margin:
0;padding: 0;display: inline-block;
		cursor: pointer;
		}
		span.colapse{
		position: relative;min-width: 10px;min-height: 10px;margin:
0;padding: 0;display: none;
		cursor: pointer;
		}
	</style>
</head>
<body>
	<h4>
		<span class="expand" id="exp_1" onclick="showDetail('1')">+</span>
		<span class="colapse" id="col_1" onclick="hideDetail('1')">-</span>
		<a href="http://www.alistapart.com">This is the title, and it is
also a link to another page.</a>
	</h4>
	<div id="item_1" class="hide">
		<p>This is the block of text that you want to show or hide. This is
the block of text that you want to show or hide. This is the block of
text that you want to show or hide. This is the block of text that you
want to show or hide. This is the block of text that you want to show
or hide. </p>
	</div>
</body>
</html>