How to hide and show an HTML element with JavaScript

Hiding and showing HTML elements with JavaScript is probably something that every software developer has to do at some point in their career. While some JavaScript libraries have their own methods for this purpose, vanilla JavaScript does not. Good news is that hiding and showing elements with vanilla JavaScript is straightforward, even without specific methods.

Hiding and showing elements using the Element.classList property

One of the easiest ways to use JavaScript to modify the styling of document content is to add and remove CSS classes to and from HTML elements. For this purpose, JavaScript has the Element.classList read-only property. The property returns a live DOMTokenList collection of the class attributes of the element that can be used to manipulate the class list. Suppose we have the following HTML elements:

<div>
 <p>Welcome to the <a href="https://javascriptguide.com">JavaScript Guide</a>!</p>
</div>

We would like the div element to have a class of hidden. This is how we can add the class:

let div = document.querySelector('div');
div.classList.add('hidden');

Now we can hide the element by adding the following definition for the class to our stylesheet:

.hidden {
 display: none;
}

If we want to show the element again, all we need to do is to remove the hidden class:

div.classList.remove('hidden');

In addition to the classList property, JavaScript has the Element.setAttribute() and Element.removeAttribute() methods that can be used to add and remove classes. This is how we can add the hidden class using the setAttribute() method:

div.setAttribute('class', 'hidden');

The first parameter represents the name of the attribute whose value is to be set, and the second parameter represents the value to assign to the attribute. This is how we can remove the class:

div.removeAttribute('class');

There is, however, a problem related to the setAttribute() and removeAttribute() methods. Suppose we have a div element like this:

<div class="yellow"></div>

…and suppose we add the hidden class using the setAttribute() method:

div.setAttribute('class', 'hidden');

Now our HTML looks like this:

<div class="hidden"></div>

If we remove the class attribute with the removeAttribute() method, our HTML looks like this:

<div></div>

The problem, as you may have noticed, is that the yellow class is nowhere to be seen. This is why we recommend using the classList property or the following style property instead.

Hiding and showing elements using the HTMLElement.style property

One more option for hiding and showing elements is to use the HTMLElement.style property. Suppose we have the same HTML as in the classList example above:

<div>
 <p>Welcome to the <a href="https://javascriptguide.com">JavaScript Guide</a>!</p>
</div>

This is how we can hide the div element with the style property:

let div = document.querySelector('div');
div.style.display = 'none';

…and this is how we can show the element again:

div.style.display = 'initial';

Hiding and showing an element on click

Suppose we have the following HTML elements:

<div>
 <p>Welcome to the <a href="https://javascriptguide.com">JavaScript Guide</a>!</p>
</div>

<button>Ok</button>

We would like to hide and show the div element by clicking the button. We can achieve this by writing a small function:

function hide() {
 let welcomeText = document.getElementById('welcomeText');
 if (welcomeText.style.display === 'none') {
  welcomeText.style.display = 'block';
 }
 else {
  welcomeText.style.display = 'none';
 }
}

…and adding an onclick attribute to the button:

<button onclick="hide()">Ok</button>

The function selects the div element and changes the value of its display property to block if the current value is none and none if the current value is not none. The onclick attribute is used to call the function whenever the button is clicked. We can achieve the same result by replacing the onclick attribute with an event listener. Let’s modify our button to look like this:

<button id="button">Ok</button>

…and our JavaScript to look like this:

let button = document.getElementById('button');
button.addEventListener('click', hide);

function hide() {
 let welcomeText = document.getElementById('welcomeText');
 if (welcomeText.style.display === 'none') {
  welcomeText.style.display = 'block';
 }
 else {
  welcomeText.style.display = 'none';
 }
}

Now we have an event listener on the button element. The listener calls the hide() function whenever the button is clicked.

Browser compatibility