Elements can be hidden from view with the visibility property.

The visibility property can be set to one of the following values:

  • hidden — hides an element.
  • visible — displays an element.
  • collapse — collapses an element.
<ul> <li>Explore</li> <li>Connect</li> <li class="future">Donate</li> </ul>
.future { visibility: hidden; }

In the example above, the list item with a class of future will be hidden from view in the browser.

Keep in mind, however, that users can still view the contents of the list item (e.g., Donate) by viewing the source code in their browser. Furthermore, the web page will only hide the contents of the element. It will still leave an empty space where the element is intended to display.

Note: What’s the difference between display: none and visibility: hidden? An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.



Take a look at the list items in index.html. Notice that the list item Donate has a class of donate.

In style.css:

  1. Add a class selector ruleset for donate.
  2. Set the visibility to hidden.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?