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

if [DIV] is an element then

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden' 

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

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

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

Answer 5

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

Answer 6

Make Invisible using CSS

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

Make Visible using Javascript

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

Answer 7

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 8

Use 'hidden' attribute of DOM element:

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

Answer 9

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;