Firefox problem: style.display='none'

Ok, this is just f***ed. I've used show/hide scripts on several websites, and never had a problem. I finally upgraded to FF 1.5 though, and now I can't get my show hide script to work. Instead of showing/hiding table rows, my radio buttons get hidden and become unclickable (because they aparently no longer exist...)

My problem is that I have a form with fields that are optional depending on the setting of a radio button. For example, if the user picks the first option, fields A-J might be shown, but if the users selects the 3rd radio button, fields B-E and K might be show. The fields are in a table, and each <tr> has a unique id and it's style is "display: none;". Here's the html:

 <tr>
  <td>
   <input type="radio" name="LINK_TYPE" value="free" onclick="javascript:toggle('basic');"> Basic Listing
  </td>
  <td>Free</td>
 </tr>
</table>
...
 <tr id="tr1" style="display: none;">
  <td class="label">{l}2nd Link Title{/l}:</td>
  <td class="field">
   <input type="text" name="TITLE2" value="{$TITLE2|escape|trim}" size="40" maxlength="{$smarty.const.TITLE_MAX_LENGTH}" class="text" />
   {validate form="submit_link" id="v_TITLE2_LENGTH" message='<span class="errForm">This field is limited to 255 characters</span>'}
  </td>
 </tr>
 <tr id="tr2" style="display: none;">
  <td class="label">{l}2nd Link{/l}:</td>
  <td class="field">
   <input type="text" name="URL2" value="{$URL2|escape|trim}" size="40" maxlength="255" class="text"/>
  </td>
 </tr>
 <tr id="tr3" style="display: none;">
  <td class="label">{l}3rd Link Title{/l}:</td>
  <td class="field">
   <input type="text" name="TITLE3" value="{$TITLE3|escape|trim}" size="40" maxlength="{$smarty.const.TITLE_MAX_LENGTH}" class="text" />
  </td>
 </tr>

Code (markup):

and here's my js

function toggle(o)
{
  if (o == "featured"){
    document.getElementById("tr1").style.display = '';
    document.getElementById("tr2").style.display = '';
    document.getElementById("tr3").style.display = '';
    document.getElementById("tr4").style.display = '';
    document.getElementById("tr5").style.display = '';
    document.getElementById("tr6").style.display = '';
    document.getElementById("tr7").style.display = '';
    document.getElementById("tr8").style.display = '';
    document.getElementById("tr9").style.display = "none";
  }
}

Code (markup):

I googled several tutorial sites, and all their examples work, but when I try to incorporate their code with mine the same problem occurs. I've tried using style.display='table-row'; instead of plain old '', but that didn't work either. Both ways worked just fine in IE6 and 7.

The site in question is www.fargodj.com, and the page giving me problems is the submit page. The direct URL is http://www.fargodj.com/submit.php, but you must create an account and be logged in to get to the submit page. (account creation is free, non-spamming, and I no one sees/knows the details but you so no worries there.)

 

Try This:

    document.getElementById( 'tr1' ).setAttribute( 'style', 'display:none' );

Code (markup):