Hidden Divs not working in Firefox :(

safeastinkywinky · 12 Jul 2007 at 16:06

This works well in IE7, but not Firefox. Anyone know why?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show divs</title>
</head>
	<body>
		<a name="h1name"></a>
		
		<h1>Heading 1 Text</h1>
			<span id="h1show"><a href="#h1name" onclick="h1.style.display='block';h1.style.border='3px solid #999999';h1.style.margin='10px';h1hide.style.display='inline'; h1show.style.display='none'">Show Code</a>
			</span>
			<span id="h1hide" style="display:none"><a href="#h1name" onclick="h1.style.display='none';h1show.style.display='inline';h1hide.style.display='none'">
Hide Code</a>
			</span>
			<span id="h1" style="display:none"><pre><h1>Heading Text</h1></pre></span>
	</body>
</html>

Cheers!

SooTyLaD · 12 Jul 2007 at 18:03

internet explorer is letting you off without the ";" after the css code...

should be:

Code:

style="display: none;"

hope this helps

safeastinkywinky · 13 Jul 2007 at 01:58

Thanks. I've corrected that, but it still doesn't work sadly! :confused:

unwashed potato! · 13 Jul 2007 at 02:09

you tried using hidden instead of none?

Augmented · 13 Jul 2007 at 10:27

The problem is related to the javascript in your onclick events.

If you want to reference an element in JS, use document.getElementById(elementID) e.g.

Code:

onclick="h1.style.display=...

should be

Code:

onclick="document.getElementById('h1').style.display=...

safeastinkywinky · 16 Jul 2007 at 14:55

Thanks very much, surprised IE let me do it in the first place!