Hi,

I want to have Javascript hide a table row (tr) when the page is called, then have links to show/hide the tr as a toggle.

The show/hide links work fine, but I can't get the tr to be hidden when the page loads. I'm trying to do this with an external (not inline) function so that I can eventually put all my Javascript into it's own file. Can anyone see how to make this work?

Code:
<html>
<head>
<script type="text/javascript">
function funHideTR() {
	var rowToHide = document.getElementById('tablerow');
	if (rowToHide) then {
		rowToHide.style.display='none';
	}
}
</script>
</head>
<body onload="funHideTR();">
<a href="#" onclick="document.getElementById('tablerow').style.display=''">Show contents</a><br />
<a href="#" onclick="document.getElementById('tablerow').style.display='none'">Hide contents</a>
<table width="400">
<tr id="tablerow">
<td>Contents of table row<td>
</tr>
</table>
</body>
</html>
Thanks for any help folks!