ASP.NET Tricks

Problem
Most of the developers will say “I can use javascript and CSS ‘visibility’ property to do that”, but shortly after that they’ll realize that this is not enough. This solution will hide the div tag content, but the space it occupies will stay.

You can reproduce this behavior using the code below:

if (objDiv.style.visibility == 'visible' ||
   objDiv.style.visibility == '')
{
  objDiv.style.visibility = 'hidden';
}
else
{
  objDiv.style.visibility = 'visible';
}

where objDiv is the div object which you’re trying to hide.

Solution

It’s simple - initialize “display” property in addition. So the above code will look like:

if (objDiv.style.visibility == 'visible' ||
    objDiv.style.visibility == '')
{
  objDiv.style.visibility = 'hidden';
  objDiv.style.display = 'none';
}
else
{
  objDiv.style.visibility = 'visible';
  objDiv.style.display = 'block';
}