How to Hide or Show Elements using JavaScript

Sometimes, you want to be able to programmatically control whether an element is visible or not.

In this post, we'll learn how to hide and show DOM elements using JavaScript.

For this post, we'll be using the following HTML:

	<div class="content">
    This is content
</div>

Now, we'll create a button that will toggle the visibility of the element.

	<button class="toggle-content">
    Toggle Content
</button>

Add a click listener to the button that will call a method to toggle the visibility of the element.

	<button class="toggle-content" onclick="toggleVisibility()">
    Toggle Content
</button>

Create a method called toggleVisibility that will toggle the visibility of the element.

We will take advantage of the display CSS property to accomplish this.

	const toggleVisibility = () => {

    const element = document.querySelector(".content");

    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}

Here's a full-page working example:

	<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="content">
                This is content
            </div>
            <button class="toggle-content" onclick="toggleVisibility()">
                Toggle Content
            </button>
        </div>
        <script>
            const toggleVisibility = () => {

                const element = document.querySelector(".content");

                if (element.style.display === "none") {
                    element.style.display = "block";
                } else {
                    element.style.display = "none";
                }
            }
        </script>
    </body>
</html>

Test it out for yourself:

HTML
JavaScript

<div class="content"> This is content </div> <button class="toggle-content" onclick="toggleVisibility()"> Toggle Content </button>
```
				
			
```
const toggleVisibility = () => { const element = document.querySelector(".content"); if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } }
```
				
			
```

And there you have it, you are now showing and hiding a DOM element using JavaScript!

Conclusion

In this post, we learned how to programmatically hide and show DOM elements using JavaScript.

We used the display property and created a simple function to toggle between the two states.

Hopefully, you've found this post helpful and have enjoyed reading it!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!