Controlling Element Visibility with CSS `visibility`: A Complete Guide

Master the CSS `visibility` property to control the visibility of HTML elements. Learn the difference between `visibility: hidden` and `display: none`, and discover how to use JavaScript to dynamically control element visibility for interactive web design.

Controlling Element Visibility with CSS `visibility`

Understanding the `visibility` Property

The CSS `visibility` property controls whether an HTML element is visible or hidden. A key distinction is that a hidden element using `visibility` *still takes up space* in the page layout. If you need to completely remove an element from the layout, use the `display` property instead.

`visibility` Property Values

The `visibility` property accepts several values:

  • visible (default): The element is visible.
  • hidden: The element is invisible but still occupies space in the layout.
  • collapse: (Applies only to table rows and columns) Hides the row or column and makes the space available to other elements. If applied to other elements, it behaves the same as `hidden`.
  • initial: Resets the property to its default value (visible).
  • inherit: Inherits the `visibility` value from its parent element.

Example: Hiding an Element with `visibility: hidden;`

This example uses `visibility: hidden;` to make an element invisible. Note that the space the element occupies remains in the layout.

CSS Code

#myElement {
  visibility: hidden;
}

To completely remove the element from the layout, use `display: none;` instead.

JavaScript Control over Visibility

You can also control element visibility using JavaScript. The example shows how to hide a div element using JavaScript.

JavaScript Code

document.getElementById("myDiv").style.visibility = "hidden";

Conclusion

The `visibility` property offers a simple way to show or hide elements, but it's essential to distinguish between hiding an element (`visibility: hidden`) and removing it from the layout (`display: none`). The `visibility` property is useful for situations where you want to temporarily hide an element but want to preserve its space in the layout. Use `display:none;` when you need to completely remove an element from the document flow.