Javascript Masking Element

| | | | | |

You can hide an element in CSS using the CSS display: none or Visibility: hidden property. display: none removes the entire element from the page and the pad affects the layout. visibility: hidden hides the element while keeping the same space.

You may come across a scenario where you want to hide an element on the web page. For example, you might have a block of text that you want to keep hidden that appears when a user clicks a button.

Hide CSS Element

There are two main approaches to hide an element in CSS, using:

  • The display attribute: none .
  • Visibility: hidden attribute.

The first approach this can affect the layout of your web page. But the second method is still popular.

Hide CSS element: display

The display property controls how an element is displayed on a web page. Each element in an HTML document has a default value for the display property, although that value depends on the element. For most items, the default display value is block or inline.

If you don’t want an item to display on an item, you can set the value of the display property to none.

The following style rule hides an element on a web page:

When you set the value of display to none, the affected item will disappear. This means that the element will no longer take up space on the web page.

display: none Example

Suppose you are designing a web page About us for a local cooking club. In our initial project, we added a cake image to the page. Now the club want us to hide the image as they are not sure about the final design.

We could hide the image on the page using the following code:

About us

The Superstar Bakers Club, founded in 2014, is a community of passionate cooks and bakers from the Charleston, South Carolina area. The club has over 100 members and meets weekly to share ideas and experiment with new recipes.