Hide or Show an Element after a few Seconds in JavaScript

# Table of Contents

# Hide an Element after a few Seconds in JavaScript

To hide an element after a few seconds:

Get access to the element you want to hide.
Use the setTimeout method to invoke a function after a delay.
Set the element's style.display property to none.

Here is the HTML for the example.

index.html

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

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

    <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!
setTimeout(() => {
  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';
}, 1000); // 👈️ time in milliseconds

hide element after few seconds

The code for this article is available on GitHub

We used the setTimeout() method to set a timer that invokes a function after a delay.

The second parameter the setTimeout function takes is the delay after which we want to call the function (in milliseconds).

The function in the example is invoked after 1000 ms (one second).

The first step is to get access to the DOM element you want to hide after a delay. We used the document.getElementById method in the example.

# Hide an Element after a few Seconds using visibility

To hide the element, we set its display CSS property to none. 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).

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

Here is an example that uses the visibility property to make the element invisible after a few seconds.

index.js

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

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

Even though the element becomes invisible, it still takes up space on the page. This is the difference between setting display to none and visibility to hidden.

# Hide an element a few seconds after a button is clicked

If you need to hide an element a few seconds after a button is clicked:

Add an event listener to the button element.
Inside the event handler function, use the setTimeout method to invoke a function after a delay.
Set the element's display property to none.

index.html

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

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

    <button id="btn">Hide Box after delay</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', () => {
  setTimeout(() => {
    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';
  }, 1000);
});

The code for this article is available on GitHub

We added an event listener on the button element.

When the button is clicked, we wait one second before hiding the div element.

# Show an Element after Delay in JavaScript

To show an element after delay:

Use the setTimeout() method to invoke a function after a delay.
In the function, set the element's visibility property to visible.
Pass the delay in milliseconds as the second parameter to the setTimeout method.

Here is the HTML for the example.

index.html

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

    <style>
      #box {
        visibility: hidden;
        background-color: salmon;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div id="box">Some content here</div>

    <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 el = document.getElementById('box');

setTimeout(() => {
  el.style.visibility = 'visible';

  // 👇️ if you used `display` to hide the element
  // el.style.display = 'block';
}, 2000); // 👈️ delay in milliseconds

show element after delay

The code for this article is available on GitHub

We selected the element we wanted to show using the document.getElementById() method.

We used the setTimeout() method to invoke a function after a delay.

The first parameter we passed to the method is the function we want to invoke and the second - the delay in milliseconds.

In the example, we used 2000 ms as the delay, which is equal to 2 seconds.

Inside the function, we set the element's visibility property back tovisible.

Notice that we initially set the property to hidden in the style tag in our HTML.

In the example, we used the visibility property to hide and show the element, however, you might need to use the display property if that's what you used to hide the element initially.

When an element's display property is set to none, the element is removed from the DOM and has no effect on 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.

Usually, when showing an element after a delay, you should use the visibility property to avoid cumulative layout shift on the page, which can be confusing to users.

# Show an Element after Delay using the display property

Here is an example that uses the display property to show an element after a delay.

index.html

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

    <style>
      #box {
        display: none;
        background-color: salmon;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div>One, two, three</div>
    <div id="box">Some content here</div>
    <div>One, two, three</div>

    <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 el = document.getElementById('box');

setTimeout(() => {
  el.style.display = 'block';
}, 2000); // 👈️ delay in milliseconds

The code for this article is available on GitHub

If you load the page, you'll see how when the element is hidden, it takes no space on the page and other elements take its space.

When we set the element's display property to block, it pushed down the content of the next elements.

Had we used the visibility property, the element would still take up space on the page, even when it is hidden.

# 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 or Show an Element after a few Seconds in JavaScript

# Table of Contents

# Hide an Element after a few Seconds in JavaScript

# Hide an Element after a few Seconds using visibility

# Hide an element a few seconds after a button is clicked

# Show an Element after Delay in JavaScript

# Show an Element after Delay using the display property

# Additional Resources

Borislav Hadzhiev