How to make a DIV visible and invisible with JavaScript?
JavascriptHtmlVisibilityJavascript Problem Overview
Can you do something like
function showDiv()
{
[DIV].visible = true;
//or something
}
Javascript Solutions
Solution 1 - Javascript
if [DIV] is an element then
[DIV].style.visibility='visible'
OR
[DIV].style.visibility='hidden'
Solution 2 - Javascript
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!).
Solution 3 - Javascript
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';
Solution 4 - Javascript
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 - Javascript
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 - Javascript
Make Invisible using CSS
#div_id {
/*height: 400px;*/
visibility:hidden;
}
Make Visible using Javascript
document.getElementById('div_id').style.visibility = 'visible';
Solution 7 - Javascript
Use 'hidden' attribute of DOM element:
function showDiv(isVisible)
{
[DIV].hidden = !isVisible;
}