Is there a way to make a DIV invisible using JavaScript

[Charlie@CBFC]

Hi:

I have sections on a page in asp panels. I would like to hide/show using
javascript, but don't see a visible property for DIV. How do you do this?

Thanks,
Charlie

 

[Rajesh CKR]

you can use

mydiv = document.getElementById("mydiv");
mydiv.style.display = "none"; //to hide it
mydiv.style.visibility = "block"; //to show it

HTH

Raj

 

[David Hogue]

You can do it with css:

document.getElementById('theDivsId').style.display = 'none';

Set it to 'block' to make it visible again. This will work for any
element, not just divs.

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

You are mixing display and visibility, that is not working.

Use either

mydiv.style.display = "none"; //to hide it
mydiv.style.display = "block"; //to show it

or

mydiv.style.visibility = "hidden"; //to hide it
mydiv.style.visibility = "visible"; //to show it

 

[Jeeran]

Hello (e-mail address removed),

I like to separate things as much as possible by having all style related
stuf in CSS files. So, I would create a css class for each state and store
them in a css file:

..hiddenDiv {
display: none;
}
..visibleDiv{
display: block;
}


Then use JavaScript to switch the css class each time:

to hide:
mydiv.className = "hiddenDiv";

to show:
mydiv.className = "visibleDiv";

p.s. You can use "visibility" instead of "display", but there is a difference.
"visibility: hidden;" hides the DIV but it will still occupy the area it
took when it was visible. While "display: none;" will hide it and shift everything
around it to take up its space.

 

[Edwin Knoppert]

That's good info!

(PS, sorry i don;'t think the css itself is a good solution in this case)

 

[Laurent Bugnion]

Hi,

That's good info!

(PS, sorry i don;'t think the css itself is a good solution in this case)

Why not?

If you really don't want to use CSS, you can also remove the node from
the DOM using JavaScript. Identify the node (with getElementById, for
example), and then remove it from its parentNode using removeChild.

Note however, that this will force a relayout of your document, which
might not be satisfactory. if you don't want a relayout, then you have
to use <element>.style.visible

HTH,
Laurent