By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,245 Members | 884 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,245 IT Pros & Developers. It's quick & easy.

Is there a way to make a DIV invisible using JavaScript

P: n/a
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
May 5 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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.

Charlie@CBFC wrote:
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


--
David Hogue
May 5 '06 #2

P: n/a
you can use

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

HTH

Raj


"Charlie@CBFC" <fi********@verizon.net> wrote in message
news:OQ**************@TK2MSFTNGP04.phx.gbl...
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


May 5 '06 #3

P: n/a
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
Rajesh CKR wrote:
you can use

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

HTH

Raj
"Charlie@CBFC" <fi********@verizon.net> wrote in message
news:OQ**************@TK2MSFTNGP04.phx.gbl...
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

May 5 '06 #4

P: n/a
Hello fi********@verizon.net,

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.
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


May 7 '06 #5

P: n/a
That's good info!

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

"Jeeran" <je****@newsgroups.nospam> schreef in bericht
news:55*************************@msnews.microsoft. com...
Hello fi********@verizon.net,

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.
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


May 7 '06 #6

P: n/a
Hi,

Edwin Knoppert wrote:
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch
May 15 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.