I have a couple of radio buttons that hide and reveal DIV tags. Here is what I'm trying to do:

1) radioBTN1 is clicked it reveals DIV1 with multiple text boxes in it
2) radioBTN2 is clicked it reveals DIV2 below DIV1 with multiple text boxes in it
3) the user fills in the text boxes in the DIV2
4) user changes mind and clicks radioBTN1 again to hide DIV2
5) when DIV2 is hidden it resets and clears all previous information

IS this possible to do with javascript?

Here is what I have so far.

Reveal Javascript:
Code:
function RemoveContent(d) {
document.getElementById(d).style.display = "none";
}
function InsertContent(d) {
document.getElementById(d).style.display = "";
}
Radiobuttons
Code:
<input name="L3" type="radio" value="1-6" onClick="javascript:InsertContent('revealBox'); RemoveContent('revealBox2') ">

<input name="L3" type="radio" value="1-12" onClick="javascript:InsertContent('revealBox2')">
text box hidden in the div
Code:
<div id="revealBox"  align="center" style="display: n*one" >
  <table border="0" align="center" cellpadding="2" cellspacing="2">
    <tr>
      <td width="15" align="center" class="formTXT">1</td>
      <td width="177" align="center" bgcolor="#EEEEEE"><input name="L3-1" type="text" class="txtBoxSm" id="L3-1" size="25" /></td>
      <td width="14"  align="center" class="formTXT">2</td>
      <td width="177" align="center" bgcolor="#EEEEEE"><input name="L3-2" type="text" class="txtBoxSm" id="L3-2" size="25" /></td>
    </tr>
    <tr>
      <td align="center" class="formTXT">3</td>
      <td align="center" bgcolor="#EEEEEE"><input name="L3-3" type="text" class="txtBoxSm" id="L3-3" size="25" /></td>
      <td align="center" class="formTXT">4</td>
      <td align="center" bgcolor="#EEEEEE"><input name="L3-4" type="text" class="txtBoxSm" id="L3-4" size="25" /></td>
    </tr>
    <tr>
      <td align="center" class="formTXT">5</td>
      <td align="center" bgcolor="#EEEEEE"><input name="L3-5" type="text" class="txtBoxSm" id="L3-5" size="25" /></td>
      <td align="center" class="formTXT">6</td>
      <td align="center" bgcolor="#EEEEEE"><input name="L3-6" type="text" class="txtBoxSm" id="L3-6" size="25" /></td>
    </tr>
  </table>
</div>

<div id="revealBox2"  align="center" style="display: no*ne" >
                    <table border="0" align="center" cellpadding="2" cellspacing="2">

                      <tr>
                        <td align="center" class="formTXT">7</td>
                        <td width="150" align="center" bgcolor="#EEEEEE"><input name="L3-7" type="text" class="txtBoxSm" id="L3-7" size="25" /></td>
                        <td  align="center" class="formTXT">8</td>
                        <td width="150" align="center" bgcolor="#EEEEEE"><input name="L3-8" type="text" class="txtBoxSm" id="L3-8" size="25" /></td>
                        </tr>
                      <tr>
                        <td align="center" class="formTXT">9</td>
                        <td align="center" bgcolor="#EEEEEE"><input name="L3-9" type="text" class="txtBoxSm" id="L3-9" size="25" /></td>
                        <td align="center" class="formTXT">10</td>
                        <td align="center" bgcolor="#EEEEEE"><input name="L3-10" type="text" class="txtBoxSm" id="L3-10" size="25" /></td>
                        </tr>
                      <tr>
                        <td align="center" class="formTXT">11</td>
                        <td align="center" bgcolor="#EEEEEE"><input name="L3-11" type="text" class="txtBoxSm" id="L3-11" size="25" /></td>
                        <td align="center" class="formTXT">12</td>
                        <td align="center" bgcolor="#EEEEEE"><input name="L3-12" type="text" class="txtBoxSm" id="L3-12" size="25" /></td>
                        </tr>
                    </table>
				  </div>

Can someone help with this javascript? I believe an array needs to be used, but I'm not sure how to go about it. THANKS.