toggle and untoggle

[howardfan123]

Hi all, looking for some help. I found this script that does almost everything i need.
I have a form that has a small section of two radio buttons
when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box.
also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled.

here is what i have so far.
placed in head

<SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
    var visSetting = (chkbox.checked) ? "visible" : "hidden"
    document.getElementById(group).style.visibility = visSetting
}</script>

part of the form having issues with

<span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/>
<br/>
<center>

  <span class="style30">Send to me to give to the recipant:</span>
  <input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" />
 </center>
  <input type="hidden" name="price3" value=".00" />
    <input type="hidden" name="qty3" value="1" />
  <input type="hidden" name="noqty3" value="3" />

 
  <div id="shipGroup"><table width="616">
<tr>
<td width="125" style="text-align:left">
<span class="style30">First Name</span>
<input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td>
<td width="151"><input type="text" name="product3[]2" value=""/></td>
<td width="147" style="text-align:right"><span class="style30" >Last Name</span>
<input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td>
<td width="173"  style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr>
<tr><td colspan="3" style="text-align:left"><span class="style30">Address</span>
<input type="hidden" name="product3[]5" value="{br}ADDRESS:" />
<input type="text" name="product3[]6" value="" size="30"/></td>
  <td>&nbsp;</td>
  </tr>
<tr><td colspan="2" style="text-align:left"><span class="style30">City</span>
    <input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td>
<td><span class="style30">State</span>
<input type="hidden" name="product3[]9" value="{br}STATE:" />
<input type="text" name="product3[]10" value="" size="10"/></td>
<td><span class="style30">Zip code</span>
<input type="hidden" name="product3[]11" value="{br}ZIP CODE:" />
<input type="text" name="product3[]12" value="" size="5"/></td></tr></table>
</div>

please anyone with help will be great