Javascript show/hide functionality
<p>I have a checkbox. By selecting the checkbox, I will show a <code>+</code> beside the checkbox. Clicking on the <code>+</code> will in turn show two radio buttons.</p>

<p>By default, one radio button is selected and shows four rows. If the user selects the second, hide the first set of rows and show the second set of rows.</p>

<p>The following is what I have:</p>

<pre><code>&lt;tr&gt;
  &lt;td&gt;&lt;form:checkbox path="revRecovery" id="chkBox" onclick="showMe('div2',chkBox)"/&gt;
    &lt;input type="hidden" value="1" name="_revRecovery"/&gt;
    Revenue Recovery&lt;input id="div2" type="button" value="+" onclick="showMe('div3',chkBox)"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan="4"&gt;
  &lt;table id="div3" style="display:none"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="trkType" id="pack" checked="checked" onclick="Test(this)"/&gt;Package&lt;input type="radio" name="trkType" id="palt" onclick="Test(this)"/&gt;Pallet&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>It is good untill here...</p>

<pre><code>&lt;tr&gt;&lt;td colspan="4"&gt;&lt;table id="package" style="display:none"&gt;
&lt;tr&gt;&lt;td&gt;Max Length:&lt;form:input path="revRecov[0].maxLength" size="15" maxlength="14" /&gt;inches&lt;/td&gt;&lt;/tr&gt;
.
.
&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td colspan="4"&gt;&lt;table id="pallet" style="display:none"&gt;
  &lt;tr&gt;&lt;td&gt;Max Length:&lt;form:input path="revRecov[0].maxLength" size="15" maxlength="14" /&gt;inches&lt;/td&gt;&lt;/tr&gt;
.
.
&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>What I am trying to do is, by default the first radio button is selected but it is not showing the first set of rows. And other behavior works (on selection of second hide the first and show the second, and vice versa). And when I uncheck the checkbox, it should hide all these tables!</p>

<p>Javascript:</p>

<pre><code>function Test(rad){
  var rads=document.getElementsByName(rad.name);
  document.getElementById('package').style.display=(rads[1].checked)?'none':'block';
  document.getElementById('pallet').style.display=(rads[1].checked)?'block':'none';
}
function showMe (it, chkbox) {
  var rr = (chkbox.checked) ? "block" : "none";
  document.getElementById(it).style.display = rr;
}
</code></pre>

<p>How can I achieve this?</p>

<p>EDITED: The following functions helps me to hide individually or the whole. calling this function for onclick event on checkbox. And also added a <code>-</code> button to my radio buttons to hide individually.</p>

<pre><code>function hide(it){
document.getElementById('package').style.display = "none";
document.getElementById('pallet').style.display = "none";
document.getElementById('div3').style.display = "none";
}
</code></pre>

<p>But, I want to show my set of rows by default if and only if <code>+</code> is clicked.</p>
