One method is using the CSS
visibility
style 'collapse' or 'hidden', depending on the desired look:
div = document.getElementById('myDivId')
div.style.visibility="hidden"
div.style.visibility="collapse"
div.style.visibility="visible"
Another variant of the above:
function hide(object) { object.style.visibility = "hidden"; }
function show(object) { object.style.visibility = null; }
See
visibility — CSS | MDN[
^].
Another way is using the CSS
display
style 'none' or 'block':
div.style.display="none"
div.style.display="block"
See
display — CSS | MDN[
^].
In addition to all that, it's sometimes a good idea not to change styles directly, but predefine one or more CSS classes and remove or add classes from/to the HTML element, to achieve desired effect at once, or to combine several effects at once.
One approach is to modify class list:
Element.classList — Web APIs | MDN[
^].
Another approach is to modify the value if the
class
attribute, which represents the name of some CSS class:
Element.setAttribute() — Web APIs | MDN[
^].
—SA