Hide/Show an Element by ID using JavaScript

# Table of Contents

# Hide an Element by ID using JavaScript

To hide an element by id, select the element using the getElementById() method and set the element's style.display property to none.

Setting the element's display property to none removes the element from the DOM, as if the element never existed on the page.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="box">Box</div>

    <button id="btn">Hide Box</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const box = document.getElementById('box');

  // 👇️ removes element from DOM
  box.style.display = 'none';

  // 👇️ hides element (still takes up space on page)
  // box.style.visibility = 'hidden';
});

The code for this article is available on GitHub

If you need to hide/show (toggle) an element by id, scroll down to the next subheading.

We added an event listener to a button element that hides a div on click.

We used the document.getElementById method to get the element with id of box.

Note that we used the display CSS property in the example, however, you might need the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn). It still affects the layout of your page as normal.

If you click on the button element from the example, the div element is removed from the DOM and the button element takes its place.

Here is an example that uses the visibility property to hide an element by its id.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const box = document.getElementById('box');

  // 👇️ hides element (still takes up space on the page)
  box.style.visibility = 'hidden';
});

When the button is clicked, the div becomes invisible, however, it still takes up space on the page.

On the other hand, if the element's display property is set to none, it no longer takes space on the page and often other elements shift and take its place.

# Hide/Show an Element by ID using JavaScript

To show/hide an element by id:

Access the style.display property on the element.
If the value of the display property is set to none, set it to block.
Otherwise, set the value to none.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box" style="background-color: salmon; width: 100px; height: 100px">
      Box 1
    </div>

    <button id="btn">Hide div</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  if (box.style.display === 'none') {
    box.style.display = 'block';

    btn.textContent = 'Hide div';
  } else {
    box.style.display = 'none';

    btn.textContent = 'Show div';
  }
});

show hide div by id

The code for this article is available on GitHub

We selected the div by its id using the document.getElementById() method.

Then, we added a click event listener to the button. Every time the button is clicked, the handleClick() function is invoked.

In the function, we check if the button's display CSS property has a value of none.

If the element has a display value set to none, then it is hidden, in which case, we set its display value to block to show the element.

Otherwise, the div is shown, in which case we set its display value to none to hide it.

We also used the textContent property, to update the button's text when the div is hidden/shown.

# Show/Hide an element by ID using visibility property

We used the display property in the examples, however, you might need to use the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn).

The element still affects the layout on your page as normal.

Here is an example that uses the visibility property to show/hide a div element by its id.

index.js

Copied!
const box = document.getElementById('box');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  if (box.style.visibility === 'hidden') {
    box.style.visibility = 'visible';

    btn.textContent = 'Hide div';
  } else {
    box.style.visibility = 'hidden';

    btn.textContent = 'Show div';
  }
});

show hide div by id visibility

The code for this article is available on GitHub

If you click on the button element, you will see that the div is hidden, however, the button doesn't take its place on the page.

Even though the div element is not rendered, it still affects the layout on the page as normal.

When we used the display property to hide the div element, the button would take its place in the DOM as the div element got completely removed from the document.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Hide/Show an Element by ID using JavaScript

# Table of Contents

# Hide an Element by ID using JavaScript

# Hide/Show an Element by ID using JavaScript

# Show/Hide an element by ID using visibility property

# Additional Resources

Borislav Hadzhiev