How to make a DIV visible and invisible with JavaScript?

Question

Can you do something like

function showDiv()
{
    [DIV].visible = true;
    //or something
}

@JackStone: No, that's only if you're already using the jQuery library. Some people just like to promote it on every JavaScript question. Even if you were, `.hide()` doesn't set visibility. It sets display. — , Feb 26 '12 at 19:23
@am not i am you have clearly failed to understand that [jQuery is really great and does all things.](http://www.doxdesk.com/img/updates/20091116-so-large.gif) [(Image source)](http://www.doxdesk.com/updates/2009.html#u20091116-jquery) — Pekka, Feb 26 '12 at 19:26
For something like this a good answer should contain both a plain JS solution and one showing the *advantage* of using a library - in this case, not having to deal with *inline vs block* when using `display` to show an element. — ThiefMaster, Feb 26 '12 at 19:29

score 175 · Accepted Answer · answered Feb 26 '12 at 19:21

175

if [DIV] is an element then

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden'

answered Feb 26 '12 at 19:21

ron tornambe

10,452
7
33
60

23

`visibility` has the side effect that the space occupied by the element remains reserved. That may or may not be what the OP wants – Pekka Feb 26 '12 at 19:23
1

In the spot where it says [DIV], I would type the name of my div right? – Feb 26 '12 at 19:25
23

No, use `document.getElementById('id-of-the-div')` instead of `[DIV]` – ThiefMaster Feb 26 '12 at 19:26
@JackStone: It depends on what you mean by the "name" of your div. If it's a variable that is referencing the div, then yes. – Feb 26 '12 at 19:27
2

So if my div were name `testdiv`, it would be `document.getElementById('testdiv').style.visibility = 'hidden';`? – Feb 26 '12 at 19:29

score 148 · Answer 2 · edited Jan 17 '17 at 23:14

148

Let's assume you do not use a library such as jQuery.

If you do not already have a reference to the DOM element, get one using var elem = document.getElementById('id');

Then you can set any CSS property of that element. To show/hide, you can use two properties: display and visibility, which have slightly different effects:

Adjusting style.display will look as if element is not present at all ("removed").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

or style.visibility will actually make the div still be there, but be "all empty" or "all white"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

If you are using jQuery, you can do it even easier as long as you want to set the display property:

$(elem).hide();
$(elem).show();

It will automatically use the appropriate display value; you do not have to care about the element type (inline or block). Additionally, elem can not only be a DOM element but also a selector such as #id or .class or anything else that is valid CSS3 (and more!).

edited Jan 17 '17 at 23:14

rogerdpack

62,887
36
269
388

answered Feb 26 '12 at 19:22

ThiefMaster

310,957
84
592
636

I prefer your answer but I guess there is a little correction you have to use elem.style.display='none'; – Saumil Jan 25 '14 at 05:34
Sometimes it is acceptable to [assign an empty string to show an element](http://stackoverflow.com/q/21457904). – Basilevs Mar 17 '15 at 07:19
When would you use hidden instead of none regarding visibility? – Timo Feb 05 '21 at 17:56
When you want to hide the element but keep it in the layout (ie it'll still use space as if it was visible). – ThiefMaster Feb 06 '21 at 22:16
1

You can use .style.display=null instead .style.display="block" or "inline" or ... . When you use null, the default value is assigned according to the element type. – Murdej Ukrutný Mar 01 '22 at 12:10

score 39 · Answer 3 · edited Aug 27 '12 at 11:23

39

You can use visibility or display but you have to apply changes to the div.style object and not the div object itself.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

edited Aug 27 '12 at 11:23

kristianp

5,496
37
56

answered Feb 26 '12 at 19:20

zellio

31,308
1
42
61

wrong values for the labels. Those work now and no I'm not going to fiddle this, it's too simplistic. – zellio Feb 26 '12 at 19:27

jarh1992 · Answer 4 · 2018-08-09T21:18:54.017

5

You can use the DOM functions: setAttribute and removeAttribute. In the following link you have an example of how to use them.

setAttribute and removeAttribute functions

A quick view:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

edited Aug 09 '18 at 21:18

answered Aug 09 '18 at 15:07

jarh1992

603
7
8

score 2 · Answer 5 · answered Nov 26 '22 at 14:19

as of November 2022 browser support for CSS revert value is 94.56% (https://caniuse.com/?search=revert) so if for hiding you use

elem.style.display = 'none'; // hide

for visibility use

elem.style.display = 'revert'; // show

this posolite doesn't care about element type

Note: The revert keyword is different from and should not be confused with the initial keyword, which uses the initial value defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

For example, the initial value for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <div>s to block, of <table>s to table, etc. revert

Kamil Kiełczewski · Answer 6 · 2019-06-12T08:25:00.350

You can use opacity which is similar to visibility but allow to smooth transition and control other parameters like height (for snippet simplicity I put js logic in html directly - don't do it in production code)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

score 1 · Answer 7 · answered Dec 27 '19 at 05:32

1

Make Invisible using CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Make Visible using Javascript

document.getElementById('div_id').style.visibility = 'visible';

answered Dec 27 '19 at 05:32

Dilip Kumar Choudhary

429
5
5

score 0 · Answer 8 · answered Feb 22 '19 at 15:20

0

Use 'hidden' attribute of DOM element:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

answered Feb 22 '19 at 15:20

Andrey Hohutkin

2,703
1
16
17

score 0 · Answer 9 · answered Nov 01 '22 at 12:47

0

ID is the name of your div. Make sure to have runat="server" in the Div.

            document.getElementById('<%= ID.ClientID %>').hidden = false;
         
            document.getElementById('<%= ID.ClientID %>').hidden = true;

answered Nov 01 '22 at 12:47

toly P

44
7

How to make a DIV visible and invisible with JavaScript?

9 Answers9

Linked

Related