Code:
<script type=text/javascript>
function change(id)
{
  var objTableChange = document.getElementById('xTable'+id);   
  if(objTableChange.style.display == 'block' || objTableChange.style.display == '') 
  {
objTableChange.style.display = 'none';
  }
else
  {
objTableChange.style.display = 'block';
  }
}
</script>
I have a javascript code like the above and some HTML code for calling the javascript function and displaying some tables under the javascript code like the below.
Code:
<table>
<tr>
<td>
 <a href="javascript:change('1');">table1</a>
</td>
<td>
  <a href="javascript:change('2');">table2</a>
</td>
</tr>

<tr>
  <td colspan='2'>

<table id='xTable1'>
<tr>
<td>table1</td>
</tr>
</table>

<table id='xTable2' style='display: none'>
<tr>
<td>table2</td>
</tr>
</table>

</td>
<tr>

</table>
(1) When the page is loading, table1 will be shown with the code above.

(2) If the link table1 is clicked, table1 will be not shown.
(3) If the link table1 is clicked agian, table1 will be shown.

(4) If the link table2 is clicked, table2 will be shown.
(5) If the link table2 is clicked again, table2 will be not shown.


It works fine. Futher more I can add a new xTable without modifying the javascript above.


But I like to make it like the following

Code:
target function

(1) When the page is loading table1 will be shown.

(2) If the link table2 is clicked, table1 will be not shown and table2 will be shown.

(3) If the link table1 is clicked, table2 will be not shown and table1 will be shown.

Can I modify the code above for my target function with your help?