Hide a table

[MaddogC]

I am using the following javascript to show or hide a table when the user clicks on a check box.

if (document.post.C3.checked)
{
document.getElementById("table1&quot.style.visibility = "visible";
}
else
{
document.getElementById("table1&quot.style.visibility = "hidden";
}

However, there are further tables after the show/Hide section, if I hide the table, there is a gap to my next table. Is there another property apart from hidden which will prevent this?

 

[shaddow]

Yep cuz the browser still renders tyhe table but makes it invisible
Should use display="none"

if (document.post.C3.checked)
   {
     document.getElementById("table1").style.display = "";
   }
  else
    {
      document.getElementById("table1").style.display = "none";
  }

________
George, M

 

[MaddogC]

This almost works. The screen adjusts correctly, however the contents of the table now don't display.

Do I need to change the following line from "" to "block" or similar?

document.getElementById("table1&quot.style.display = "";

 

[shaddow]

Maybe you need to check your table content first, maybe it's no data there.
The code as it is works for shure.

________
George, M

 

[MaddogC]

I need to combine the two statements, which is almost there!
The only problem now, is that when the page first opens, there is the blank gap. Where can I set the property so that it doesn't display when it first opens?


if (document.post.C1.checked)
{
document.getElementById("area2&quot.style.display="";
document.getElementById("area2&quot.style.visibility = "visible";
}
else
{
document.getElementById("area2&quot.style.display="none";
document.getElementById("area2&quot.style.visibility = "hidden";
}

 

[shaddow]

Aha well then your problem it's on the TABLE tag
should be something like this.

<table id=table1 style=&quot;display:none&quot;>


</table>
.....
if (document.post.C3.checked)
   {
     document.getElementById(&quot;table1&quot;).style.display = &quot;&quot;;
   }
  else
    {
      document.getElementById(&quot;table1&quot;).style.display = &quot;none&quot;;
  }

Use the first code, the problem was that you had the table style=&quot;visibility:hidden&quot; and so it would remain the white gap. but changing into display:none would work.
Also any display value that is not none will show your table.

________
George, M

 

[FlavioLeo]

You need encapsulate the table into the <div></div> and make this object Hidden, this eliminate the gap on the page.

 

[MaddogC]

sorted!!! Thanks gents!