Hide & Show DOM Elements in Plain JavaScript

How do you go about hiding a DOM element using JavaScript? And what if you want to show the element again? We'll show you how to do both of those things in this article.

Each element in the DOM exposes a style property that you can use to alter their CSS properties.

To hide an element, you can change the display CSS property to "none":

    
      element.style.display = "none"
    
  

And if you want to show the element, set its display CSS property to "block" (you can also switch it to "inline"):

    
      element.style.display = "block"
    
  

There you have it. Now you know how to show and hide elements using JavaScript.

Thanks for reading and happy coding!