Show / Hide TD

[rpanning]

I havn't much time to reseach if someone else has this out some where but here it goes.

I'm trying to make a layout where the user can hide / show the navigation. It's a table with three columns; nav, hide/show bar, content. When a user clicks on the middle td, hide/show bar, it will do just that to the nav td. I've gotten it to work with buttons. Take a look here, http://stma.mtb-zone.net/toggleNav.htm Click on the little arrow next to 'content'. You'll notice that the nav is gone an another arrow pointing the other way is displayed to 'unhide' the nav. Basicly all I want to do is make it so you can click on the whole td to show/hid the nav. I can't to it with the way I have it. I've found something similar to what I want here, http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20381554.html Look at the Accepted Answer. It's just a function that checks to see what state the nav is in but I can't get it to work the way I want. Anyway, if anyone knows how I could do this that would be great.

Sorry it got so long and if someone already answered this, I don't know much about JavaScript and havn't had time to research it in detail.

Ryan

[rpanning]

Ok, just for a clearer question, here is what I have which is not working.


<script language="JavaScript" type="text/JavaScript">
function ToggleNav() {
if (document.getElementByID('nav').style.display=='none') {
document.getElementByID('nav').style.display='';
document.getElementByID('hide').style.display='';
document.getElementByID('show').style.display='none';
} else {
document.getElementByID('nav').style.display='none';
document.getElementByID('hide').style.display='none';
document.getElementByID('show').style.display='';
}
}
</script>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="180" style="display:inline" id="nav">nav</td>
<td width="2" align="center" valign="middle" bgcolor="#efefef" onClick="ToggleNav();">
<span id="hide">‹</span>
<span style="display:none" id="show">›</span>
</td>
<td>content</td>
</tr>
</table>


When I test it in Firebird I get a good error unlike IE. 'Error: document.getElementByID is not a function' IE just gives me a non-descriptive error. If I leave out the document in the if statement I get a 'Error: getElementByID is not defined'. Thanks for yor help.

[frez]

I'm not entirely sure, but I'm mostly sure that the TD "object" does not accept events like "onClick"...

[rpanning]

I looked that up in my books and you are right. So, I tried a link tage instead with a width and height of 100%. Guess what, same error. lol Any more ideas?

[Khalid Ali]

document.getElementByID
The above is not a DOM method...
correct spelling will be

document.getElementById

Javascript is case sensitive therefore ID will make the whole syntax incorect

[rpanning]

That was it! Thanks Khalid Ali.