CSS display: none

display: none removes an element from the page as if it were not in the HTML. It takes no space, and it cannot be seen, clicked or focused.

1
2
3
4
5
6
7

<style>
  .hidden { display: none; }
  p { background: #d0e8f2; padding: 8px; }
</style>
<p>Paragraph one</p>
<p class="hidden">Paragraph two (hidden)</p>
<p>Paragraph three</p>

Paragraph three sits directly under paragraph one. The hidden one left no gap.

It also hides the element from assistive technology

Screen readers skip anything with display: none. That is usually what you want for things like a closed menu, but not for content that is only visually hidden but should still be announced. For that, see the visually-hidden technique used by accessibility frameworks. It combines position: absolute with a 1px clip.

Show or hide at different screen sizes

A very common use is to swap content depending on the screen:

1
2
3
4
5

.mobile-only { display: none; }

@media (min-width: 768px) {
  .mobile-only { display: block; }
}

Media queries are covered in Media Queries.

Hidden by default, shown by JavaScript

A dropdown menu usually starts with display: none and a script adds a class to show it. Notice that elements cannot be animated in or out with display directly, because it flips instantly. Use opacity or transform for fades and slides. See CSS Transitions.