visibility

The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible.

Depending on the value of attribute pointer-events, graphics elements which have their visibility attribute set to hidden still might receive events.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css visibility for further information.

Usage context

Example

The following example toggles the CSS `visibility` of the SVG image path.

HTML

<button id="nav-toggle-button" >
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="button-icon">
    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" class="invisible" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  <span>
    click me
  </span>
</button>  

CSS

span {
  vertical-align: 50%;
}
button {
  line-height: 1em;
}
.invisible {
  visibility: hidden;
}

JavaScript

document.querySelector("button").addEventListener("click", function (evt) {
  this.querySelector("svg > path:nth-of-type(1)").classList.toggle("invisible");
  this.querySelector("svg > path:nth-of-type(2)").classList.toggle("invisible");
}); 

Elements

The following elements can use the visibility attribute

• Graphics elements »
• Text content elements »

Browser compatibilityUpdate compatibility data on GitHub

See also

• The display attribute
• css visibility