Web UI - Element Visibility (display:none vs visibility:hidden)


To hide an element in CSS, you may use:

The difference is that:

  • with the display:none option, you will not see any blank space
  • while with visibility:hidden, you will (if the element is positioned - ie not absolute)


They are used has the basic elements to implement toggling


  • The css of the element to toggle
.hidden {
  /* Not displayed at first */
  display: none;
  • The trigger element that will toggle the visibility of the target element
  • The target element
<p class="toggle hidden">I'm not visible until you click on the button</p>
  • Result: click on the button to toggle the visibility

Powered by ComboStrap