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

About

To hide an element in CSS, you may use:

• the display property to none
• or the visibility property to hidden

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)

Toggle

They are used has the basic elements to implement toggling

Example:

• 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

<button>Toggle</button>

• The target element

<p class="toggle hidden">I'm not visible until you click on the button</p>

• The javascript that modifies the css of the target element by toggling the a value in the class attribute

document.querySelector("button").addEventListener("click",function(){
   document.querySelector(".toggle").classList.toggle('hidden');
});

• Result: click on the button to toggle the visibility