Show an Element after Delay using JavaScript

avatar

Borislav Hadzhiev

Thu Jan 06 20222 min read

Show an Element after Delay using JavaScript #

To show an element after delay:

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

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <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>

And here is the related JavaScript code.

index.js
const el = document.getElementById('box'); setTimeout(() => { el.style.visibility = 'visible'; // 👇️ if you used `display` to hide element // el.style.display = 'block'; }, 2000); // 👈️ delay in milliseconds

We selected the element we want 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 of 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 on your page as normal.

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

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

index.html
<!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>

And here is the related JavaScript code.

index.js
const el = document.getElementById('box'); setTimeout(() => { el.style.display = 'block'; }, 2000); // 👈️ delay in milliseconds

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.

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