153

Can you do something like

function showDiv()
{
    [DIV].visible = true;
    //or something
}
Improve this question
4
  • 2
    Why not just use Jquery? .hide() ? Commented Feb 26, 2012 at 19:20
  • 10
    @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. Commented Feb 26, 2012 at 19:23
  • 10
    @am not i am you have clearly failed to understand that jQuery is really great and does all things. (Image source) Commented Feb 26, 2012 at 19:26
  • 9
    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. Commented Feb 26, 2012 at 19:29

9 Answers 9

Reset to default
183

if [DIV] is an element then 

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden'
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

visibility has the side effect that the space occupied by the element remains reserved. That may or may not be what the OP wants
In the spot where it says [DIV], I would type the name of my div right?
No, use document.getElementById('id-of-the-div') instead of [DIV]
@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.
So if my div were name testdiv, it would be document.getElementById('testdiv').style.visibility = 'hidden';?
|
156

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

Improve this answer

5 Comments

I prefer your answer but I guess there is a little correction you have to use elem.style.display='none';
Sometimes it is acceptable to assign an empty string to show an element.
When would you use hidden instead of none regarding visibility?
When you want to hide the element but keep it in the layout (ie it'll still use space as if it was visible).
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.
41

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';
Improve this answer

1 Comment

wrong values for the labels. Those work now and no I'm not going to fiddle this, it's too simplistic.
6

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");
Improve this answer

Comments

6

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

Improve this answer

Comments

2

Make Invisible using CSS

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

Make Visible using Javascript

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

Comments

1

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>

Improve this answer

Comments

0

Use 'hidden' attribute of DOM element:

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

Comments

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;
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.