How to make a DIV visible and invisible with JavaScript

How to make a DIV visible and invisible with JavaScript

Can you do something like
function showDiv()
[DIV].visible = true;
//or something


Solution 1:

if [DIV] is an element then




Solution 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”). = 'none'; // hide = 'block'; // show - use this for block elements (div, p) = '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” = 'hidden'; // hide, but lets the element keep its size = 'visible';

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


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

Solution 3:

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

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

// hide = 'hidden';
// OR = 'none';

// show = 'visible';
// OR = 'block';

Solution 4:

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

Solution 5:

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>

Solution 6:

Use ‘hidden’ attribute of DOM element:

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