Show/hide in an ADDT form

Question

has anyone successfully used a show/hide script of any kind in an ADDT form?
What I'm trying to do is, I've got Yes and No radio buttons.  If Yes is clicked, a text box appears in the row below.
If No is clicked, no change occurs.
I had one that was working but now all of the sudden it is no longer working.  What happens now is when you arrive on the page, the text box that is supposed to be hidden, is visible.  However, when you click No, it disappears and if you click Yes, it reappears.
Below is the code.  I'm thinking there must be a conflict between the javascript code below and ADDT.  Any help is appreciated!  Thanks!
<SCRIPT LANGUAGE="JavaScript">
function showhide1(id,str)
    if (document.getElementById)
        obj = document.getElementById(id);
        if (str == "show") //obj.style.display == none
            obj.style.display = "";
        else if (str == "none")
            obj.style.display = "none";
</script>
  <tr><td align="right">Will anyone in your party require translation services at Open House?</td> <td> <input type="radio" name="translation" value="Yes" onClick="showhide1('display','show');">Yes<input type="radio" name="translation" value="No" checked  onClick="showhide1('display','none');">No</td></tr>
        <tr id="display"><td align="right" > In what Language? </td> <td> <font color="red">*</font> <input type="text" name="language"></td></tr>

Answer 1

OK, I added a function that fires on page load so that the conditional row will be displayed if the Yes radio button has been checked.You should now remove the CSS rule for the conditional row. I tested the code with Firefox 3 and IE8 and it works but it is by no means complete.
<script type="text/javascript">
window.onload = showRow;
function showRow() {
if (document.getElementById("radioYes").checked)
{document.getElementById("display").style.display = ""}
else
{document.getElementById("display").style.display = "none"};
function showhide1(id,str)
    if (document.getElementById)
        var obj = document.getElementById(id);       
        if (str == "show") //obj.style.display == none
            obj.style.display = "";
        else if (str == "none")
            obj.style.display = "none";
</script>
The HTML code for the two table rows should now be:
<tr><td align="right">Will anyone in your party require translation services at Open House?</td>
<td><input name="translation" type="radio" onClick="showhide1('display','show');" value="Yes" checked="checked" id="radioYes">Yes
<input type="radio" name="translation" value="No" id="radioNo" onClick="showhide1('display','none');" >No</td></tr>
<tr id="display">
<td align="right">In what Language?</td>
<td><font color="red">*</font>
<input type="text" name="language"></td></tr>