Hiding

There will be times where you will want to hide elements. There are a few ways of doing this.

Display: None

This completely removes the element from the DOM and is not the best option for accessibilty as visually imparied people using screen readers will not be able to tab to the element.

Notice how toggling display: none; completely removes the element from the DOM and shifts the layout.

Visibility: Hidden

This is often the better choice.

Notice how toggling visibility: hidden; retains the layout and keeps the element in the DOM.