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

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>

Answer 2

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

Answer 3

Use 'hidden' attribute of DOM element:

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

Answer 4

Make Invisible using CSS

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

Make Visible using Javascript

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

Answer 5

if [DIV] is an element then

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden' 

Answer 6

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