How to make a DIV visible and invisible with JavaScript

Question

Can you do something like

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

Answer 1

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