Javascript uses the **`style.display`** property to hide or show HTML elements; it does this by accessing the individual objects in the [DOM](https://www.educative.io/answers/what-is-dom) object and setting the property.
 
>The **DOM object** establishes parent-child relationships and adjacent sibling relationships among the various elements in the HTML file.

<br>

# Code
The following code shows a sample HTML file and its corresponding DOM object:

<!DOCTYPE html>
<html>
<body>
  <h1>My First Web Page</h1>
  <p>My First Paragraph</p>
  <p id="demo"></p>
</body>
</html>

# Example
We can use Javascript to access and change the properties of these DOM elements. The following Javascript code, written within HTML, accesses a paragraph in the HTML and sets its `style.display` property to `none` to hide it.

<html>
    <head>
    </head>
    <body>
        <h1>My First Web Page</h1>
        <p>My First Paragraph</p>
        <p id="demo"> Clicking the button will hide this content.</p>
        <button id="but" type="button" onclick=objectHide()>Click to hide</button>
        
        <script>
            function objectHide() {
                document.getElementById("demo").style.display = "none";
                document.getElementById("but").style.display = "none";
            }
        </script>
    </body>
</html>

codemirror

Another property that hides elements in Javascript is `style.visibility`. However, the main difference between it and `style.display` is that, by setting the `style.visibility` property to `hidden`, the space of the element remains allocated in the output, only its visibility changes. 

On the other hand, `style.display` also removes the space allocation of that element from the output screen.

How to hide an element in JavaScript

Javascript uses the style.display property to hide or show HTML elements; it does this by accessing the individual objects in the DOM object and setting the property.  The DOM object establishes parent-child relationships and adjacent sibling relationships among the various elements in the HTML file.   Code The following code shows a sample HTML file and its corresponding DOM object: 