How do I hide a row in a table?

[wxdqz]

Hi. What I would like to do is hid a row or rows in a table depending on the answer to a question that is also in the table. Here is what I have tried:


<TR CLASS = "AlternateLine">
<TD>3.</TD>
<TD>Have you ever worked under another social security number?</TD>
<TD>
<INPUT TYPE = RADIO NAME = optOtherSSN VALUE = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"Y" ONCLICK="showIt('OtherSSN')">Yes
<INPUT TYPE = RADIO NAME = optOtherSSN VALUE = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"N" ONCLICK="hideIt('OtherSSN')">No
</TD>
</TR>

<DIV ID = "OtherSSN" STYLE="position:relative">
<TR CLASS = "AlternateLine">
<TD>&nbsp;</TD>
<TD>If Yes, please enter that social security number:</TD>
<TD><INPUT TYPE = TEXT NAME = txtOtherSSN SIZE = 15></TD>
</TR>
</DIV>

//here are the JavaScript funcitons that I have in the page Head:

<SCRIPT TYPE = "text/javascript" LANGUAGE = "JavaScript">
<!--
function showIt(obj)
{
if (document.layers)
{
document.getElementById(obj).visibility="show";
}
else
{
document.getElementById(obj).style.visibility="visible";
}
}//end function

function hideIt(obj)
{
if (document.layers)
{
document.getElementById(obj).visibility="hide";
}
else
{
document.getElementById(obj).style.visibility="hidden";
}
}//end function
//-->
</SCRIPT>


This is not working. First, the row I want to hide is visible when the screen is first opened. How do I hide it when the screen is first loaded? Second, nothing happens when either the "Yes" or "No" option button is chosen. What is wrong with my code? Any help is greatly appreciated.