Show/hide tables dynamically?

[kvijayhari]

Hi , I'm having a page with two tables inside a table. The two tables inside the main table has unique ids.I have two buttons as show and hide.What i want do is , when i click the show button the contents of the first table should be visible and when i click the hide button the contents of the first table should hide and important thing is that the second table should be dynamically placed in accordance with the first one.Here is the codings.

<script language=javascript>function show(){	var tbl = document.getElementById('default');	tbl.style.visibility = visible;}function hide(){	var tbl = document.getElementById('default');	tbl.style.visibility = collapse;}</script><center><table border=01 width=80% height=100%><tr><td>	 <div align=left>	   <img src='' title="Click to Show" style="cursor:pointer;" onclick=show()>	   <img src='' title="Click to Hide accounts" style="cursor:pointer;" onclick=hide()>	 </div>	 <table id='default' border=0 cellpadding=0 cellspacing=1 style="font-size: 14px; font-family: arial; visiblity:hidden;"> 	   <tr>		 <!-- some php code here-->   	 </tr>	 </table>	 <br>	   <table border=0 cellpadding=0 cellspacing=1 style="font-size: 14px; font-family: arial; position:relative;"> 		<tr><th height=25 align=left>User Created</th></tr>		<tr height=20>			<!-- some php code here-->		</tr>	 </table></td></tr><tr align=center height=35><td colspan=4 halign=center><input class=frmbtn name=add type=submit onClick=''></td></tr></table></center>

Pls help me to sort it out. :cry:

[Reg Edit]

function show(){	var tbl = document.getElementById('default');	//tbl.style.visibility = visible;	tbl.style.display = 'block';}function hide(){	var tbl = document.getElementById('default');	//tbl.style.visibility = collapse;	tbl.style.display = 'none';}

[ThePsion5]

You could also compress that into a single function, right? Like so:

function toggleVisibility(){  var table = document.getElementByID('default');  if(table.style.display == 'block')	table.style.display == 'none')  else	table.style.display == 'block';}

[kvijayhari]

You could also compress that into a single function, right? Like so:

function toggleVisibility(){  var table = document.getElementByID('default');  if(table.style.display == 'block')	table.style.display == 'none')  else	table.style.display == 'block';}

Nice format and slim code..I'll try to write these kind of code.Thank you