Search notes:

CSS: visibility property

The visibility property controls where an element is visible or not.

When the value is set to hidden, the content of the element is not displayed but the element still takes as much space as it would if it were displayed.

In order to hide and free the occupied space of the element, the display property must be set to none. (See display:none vs visibility:hidden).

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>visibility</title>

  <script type="text/javascript">

    var hidden = false;
    function change() {
      var elem = document.getElementById('foo');
      elem.style.visibility = hidden ? 'visible' : 'hidden';
      hidden = !hidden;
    }


  </script>
</head>
<body>

  <div id='foo' style='background-color:blue; width:150px; height: 150px'>
  </div>


  <form action='#'>
    <input type="submit" value="Change visibility" onclick="change()">
  </form>

</body>
</html>

Github repository about-css, path: /properties/visibility.html

CSS: visibility property

See also