Hide an Element after a few Seconds using JavaScript

avatar

Borislav Hadzhiev

Tue Dec 28 20212 min read

banner

Photo by Finan Akbar

Hide an Element after a few Seconds using JavaScript #

To hide an element after a few seconds:

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

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" style="height: 150px; width: 150px; background-color: salmon"> Box </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
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

We used the setTimeout method to set a timer which 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 from 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.

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 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 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
setTimeout(() => { const box = document.getElementById('box'); // ๐Ÿ‘‡๏ธ hides element (still takes up space on 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.

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

  1. Add an event listener to the button element.
  2. Inside of the event handler function, use the setTimeout method to invoke a function after a delay.
  3. Set the element's display property to none.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </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>

And here is the related JavaScript code.

index.js
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); });

We added an event listener on the button element.

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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee