Show/Hide Two Tables onClick of checkbox

Question

I am trying to show/hide a table onclick of a checkbox and show another table onclick of a second checkbox while hiding the first one.

I have two tables and two checkboxes. One is labeled "customize" and one is labeled "standard". I would like to start off showing the "customize" table with advanced options on the page load - which it currently does - and hide the table when the other selection, "standard", is checked - which it also currently does.

Now I am trying to expand on that by adding a 2nd table to only display the "standard" options. This table I named "standard", and it only has a few options, where as the "customize" table has many.

Any ideas of how to go about doing this? Here is my code so far with the working show/hide table functionality of the one table.

My JavaScript:

<script type="text/javascript">
<!--
function showTable(which)
{
    if(which == "1") {
        document.getElementById('customize').style.display = "table";
        }
        if(which == "2") {
        document.getElementById('customize').style.display = "none";
        }
}
//-->
</script>

My HTML:

<input name="radio" type="radio" id="customize_1" onClick="showTable('2')" value="radio" />
                  <label for="radio3"></label>
Standard
        &nbsp;&nbsp;&nbsp;
        <input name="radio" type="radio" id="customize_0" onClick="showTable('1')" value="radio" checked="checked" /> 
        Customize
</span></td>
                </tr>
                <tr>
                  <td colspan="5" nowrap="nowrap" class="formlabel">Password: 
                    <input type="password" name="textfield2" id="textfield2" class="fields" size="15" /></td>
                </tr>
</table>
<br />
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
                <tr>
                  <th valign="top" class="header" nowrap="nowrap">Scores</th>
                  <th colspan="3" valign="top" nowrap="nowrap" class="header">Exam Options</th>
                  <th valign="top" nowrap="nowrap" class="header">Categories</th>
                </tr>
                <tr>
                  <td valign="top" class="formlabel" nowrap="nowrap"><input type="checkbox" name="checkbox3" id="checkbox4" />
                    Exam Score (Pts)<br />
  <input type="checkbox" name="checkbox3" id="checkbox5" />
                    Letter Grade<br />
  <input type="checkbox" name="checkbox4" id="checkbox7" />
                    Percentage<br />
                    <input type="checkbox" name="checkbox12" id="checkbox19" /> 
                    Raw Score (# Correct)
</td>
                  <td valign="top" class="formfield" nowrap="nowrap"><span class="formlabel">
                    <input type="checkbox" name="checkbox15" id="checkbox20" />
Statistics (Mean, Median, Std Dev)<br />
<input type="checkbox" name="checkbox15" id="checkbox21" />
Rank<br />
<input type="checkbox" name="checkbox15" id="checkbox22" />
Percentage Rank<br />
<input type="checkbox" name="checkbox15" id="checkbox23" />
Item Text </span></td>
                  <td valign="top" class="formfield" nowrap="nowrap"><span class="formlabel">
                  <input type="checkbox" name="checkbox13" id="checkbox24" /> 
Item Description
<br />
<input type="checkbox" name="checkbox13" id="checkbox25" /> 
Answer Choice Text
</span><br />
<span class="formlabel">
<input type="checkbox" name="checkbox16" id="checkbox2" />
Answer Key<br />
<input type="checkbox" name="checkbox16" id="checkbox26" />
Wrong Answer Only</span></td>
                  <td valign="top" nowrap="nowrap" class="formfield"><span class="formlabel">
                  <input type="checkbox" name="checkbox" id="checkbox10" />
                    Rationale<br />
  <input type="checkbox" name="checkbox6" id="checkbox11" />
                    Actual Item Sequence<br />
  <input type="checkbox" name="checkbox6" id="checkbox12" /> 
  Essay Responses<br />
  <input type="checkbox" name="checkbox6" id="checkbox13" />
                    Essay Grader Comments</span></td>
                  <td valign="top" nowrap="nowrap" class="formfield"><input type="checkbox" name="checkbox7" id="checkbox14" />
                    Performance in Each Category<br />
                    <a href="" class="buttonintable basicAddCategory3" title="Select categories">Select Category</a>
<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox15" disabled="disabled" />
                    Category Full Path <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox16" disabled="disabled" />
                    Group by Parent<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="checkbox14" id="checkbox17" disabled="disabled" />
                    Category Mean<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="checkbox14" id="checkbox18" disabled="disabled" /> 
Category Std Dev
</td>
                </tr>
      </table>
      <div style="display:none">
      <table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard">
                <tr>
                  <th valign="top" class="header" nowrap="nowrap">Categories</th>
                </tr>
                <tr>
      <td valign="top" nowrap="nowrap" class="formfield"><input type="checkbox" name="checkbox7" id="checkbox14" />
                    Performance in Each Category<br />
                    <a href="" class="buttonintable basicAddCategory3" title="Select categories">Select Category</a>
<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox15" disabled="disabled" />
                    Category Full Path <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox16" disabled="disabled" />
                    Group by Parent<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="checkbox14" id="checkbox17" disabled="disabled" />
                    Category Mean<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="checkbox14" id="checkbox18" disabled="disabled" /> 
Category Std Dev
</td>
                </tr>
      </table>
      </div>

Any ideas?

Answer 1

If stripped down your code a little and created a fiddle for you, this should get you started: http://jsfiddle.net/4tcRD/

JS

function toggleTables(which)
{
    if(which == "1") 
    {
        document.getElementById('customize').style.display = "table";
        document.getElementById('standard').style.display = "none";
    }
    if(which == "2") 
    {
        document.getElementById('standard').style.display = "table";
        document.getElementById('customize').style.display = "none";
    }
}​

HTML

<input name="radio" type="radio" id="customize_1" onClick="toggleTables('2')" value="radio" />
<label for="radio3"></label> Standard&nbsp;&nbsp;&nbsp;
<input name="radio" type="radio" id="customize_0" onClick="toggleTables('1')" value="radio" checked="checked" /> 
Customize


<br />
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
    <tr><td>customize</td></tr>                   
</table>

<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
    <tr><td>standard</td></tr>                   
</table>​

The problem in your case was the div around the table which was set to display: none.

Answer 2

You could add a class to the two tables and select them using getElementsByClassName instead of getElementById

 <table class="standard expand" ... >