CSS Visibility

CSS visibility property shows or hides an element without changing the layout of a document.

h2.a {
  visibility: visible;
}

h2.b {
  visibility: hidden;
}

CSS Visibility-values

visible:

It is the by default value. It specifies that the element is visible.

hidden:

It specifies that the element is invisible (but still takes up space).

collapse:

It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as “hidden”

initial:

It is used to set this property to its default value.

inherit:

It is used to inherit this property from its parent element.

CSS Visibility vs Display

The display and visibility CSS properties appear to be the same thing, but they are in fact quite different and often confuse those new to web development.

• visibility: hidden; hides the element, but it still takes up space in the layout. Child element of a hidden box will be visible if their visibility is set to visible.
• display: none; turns off the display and removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. All child elements also have their display turned off, even if their display property is set to something other than none.

CSS Visibility-example

function myFunction() {  
    document.getElementById("myDIV").style.visibility = "hidden";