Visibility / Hide

CSS display: none;

When using display: none; the element is completely hidden from the document flow and does not take up any space.

It is commonly used with JavaScript to hide or show elements without deleting and recreating them.

Click to show hidden panel

This panel contains a <div> element, which is hidden by default, with display: none.

We use JavaScript to show it (change it to display: block).

Example

Example

Hide an Element - Use display:none or visibility:hidden?

display:none

<img src="img_5terre.jpg" style="width:100%;" alt="Italy">

<button class="ws-btn w3-block" onclick="removeElement()">Remove</button>

visibility:hidden

<img src="img_forest.jpg" style="width:100%;" alt="Forest">

<button class="ws-btn w3-block" onclick="changeVisibility()">Hide</button>

Reset

<img src="img_lights.jpg" style="width:100%;" alt="Lights">

<button class="ws-btn w3-block" onclick="resetElement()">Reset All</button>

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

Example

h1.hidden {
  display: none;
}

You can also use visibility:hidden; to hide an element.

However, with this property, the element will be hidden, but it will still take up the same space as if it was visible:

Example

h1.hidden {
  visibility: hidden;
}

CSS Display/Visibility Properties