How to make a DIV visible and invisible with JavaScript

Question

if [DIV] is an element then

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden' 

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

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';

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");