Hiding content

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Hiding content

There are three ways to hide content:

1. Hiding content BOTH visually and from screen readers.
2. Hiding content visually only.
3. Hiding content from screen readers only.

Hiding content BOTH visually and from screen readers

If you want to hide content completely, you can use any of these methods:

1. Set element to display: none.
2. Set element to visibility: hidden.
3. Use the hidden attribute.

Here’s how to choose between them:

1. Use hidden or display: none if you don’t want to animate the element.
2. Use visibility: hidden if you want to animate hidden element.

Hiding content visually

In theory, you can hide content visually (but not from screen readers) by setting opacity to 0.

.element {
  opacity: 0;
}

But it’s not so simple in practice. Long story short, the best way to hide content visually is with this bunch of CSS.

.sr-only {
  position: absolute;
  width: 1px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

If you use .sr-only, users will not be able to see the content, but screen readers can still read the content.

<p>Visible content.</p>
<p class="sr-only">Screen reader only content.</p>

Hiding content from screen readers

You can use aria-hidden to hide content from screen readers. You should hide content from screen readers only if it improves their experience.

<p>Visible content.</p>
<p aria-hidden="true">Visible (but not to screen readers)</p>
<p>Visible content.</p>