Show / Hide a table with Javascript

<script type="text/JavaScript">

<!--
function show(id)
{
     if (document.getElementById(id).style.display == 'none')
     {
          document.getElementById(id).style.display = '';
     }
}
//-->

<!--
function hide(id)
{
          document.getElementById(id).style.display = 'none';

}
//-->
</script>


<table cellspacing="1" cols="3" border="0">
    <tbody>
    <tr valign="top" align="left">
      <td width="202"><b>Please, select option</b></td>

      <td width="481">A
        <input type="radio" name="Option" onfocus="hide('tblB');hide('tblC');show('tblA');">
        B
        <input type="radio" name="Option"  onfocus="hide('tblA');hide('tblC');show('tblB');return true;">
        C      
        <input type="radio" name="Option" onfocus="hide('tblA');hide('tblB');show('tblC');return true;">
      </td>
    </tr>
    </tbody>
  </table>
  

  <table id="tblA" style="DISPLAY: none" cols="1" cellpadding="2">
    <tbody>
    <tr valign="top" align="left">
     
    <td>
      You&nbsp;select A,
      table
      tblA is shown&nbsp;
      </td>
    </tr>
    </tbody>
  </table>
  <table id="tblB" style="DISPLAY: none" cols="1" cellpadding="2">
    <tbody>
    <tr valign="top" align="left">
      <td>
       You&nbsp;select B, table tblB
       is shown&nbsp;
      </td>
    </tr>
    </tbody>
  </table>
   <table id="tblC" style="DISPLAY: none" cols="1" cellpadding="2">
    <tbody>
    <tr valign="top" align="left">
      <td>
       You&nbsp;select C, table tblC
       is shown&nbsp;
      </td>
    </tr>
    </tbody>
  </table>

Leave a Reply

Your email address will not be published. Required fields are marked *