Skip to main content

How to Hide or Show an Element After a Delay in JavaScript

A common requirement in web development is to hide or show an element after a short delay. This is useful for displaying notifications that disappear automatically, showing a "loading" indicator that only appears after a moment, or creating simple animations. The standard, built-in JavaScript method for scheduling a future action is setTimeout().

This guide will teach you how to use setTimeout to hide or show an element. Crucially, you will learn the important difference between using the display and visibility CSS properties to control an element's appearance.

The Core Method: setTimeout()​

The setTimeout() function is the key to this entire process. It allows you to schedule a function to be executed once after a specified delay.

Syntax:

setTimeout(callbackFunction, delayInMilliseconds);
  • callbackFunction: The function that will run after the delay. This is where we will change the element's style.
  • delayInMilliseconds: The time to wait before executing the function (e.g., 2000 for 2 seconds).

Goal 1: Hiding an Element After a Delay​

To hide an element, we will call setTimeout and, in its callback, change the element's CSS display or visibility property.

Consider this HTML code:

<div id="notification">This will disappear in 3 seconds.</div>
<button id="hide-btn">Hide Notification</button>

This example hides the notification three seconds after a button is clicked.

const notification = document.getElementById('notification');
const hideButton = document.getElementById('hide-btn');

hideButton.addEventListener('click', () => {
  console.log('Hiding notification in 3 seconds...');
  
  setTimeout(() => {
    notification.style.display = 'none';
  }, 3000); // 3000 milliseconds = 3 seconds
});

After the button is clicked, the script will wait for three seconds and then set the display style to 'none', causing the element to vanish.

Goal 2: Showing an Element After a Delay​

The logic for showing an element is the inverse. You start with a hidden element and use setTimeout to change its style to make it visible.

Consider this HTML code:

<div id="popup" style="display: none;">You have a new message!</div>

In the following solution, this script will make the popup appear two seconds after the page loads.

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

setTimeout(() => {
  // Change display from 'none' to 'block' (or 'flex', 'grid', etc.)
  popup.style.display = 'block';
}, 2000); // 2000 milliseconds = 2 seconds

The Critical Distinction: display: 'none' vs. visibility: 'hidden'​

The choice between display and visibility is crucial as it affects the page layout.

  • element.style.display = 'none';

    • This removes the element from the document layout flow. The space it occupied will collapse, and other elements will shift to fill the void.
    • Use this when you want the element to completely disappear as if it were never there.

  • element.style.visibility = 'hidden';

    • This makes the element invisible but leaves its space in the layout. It's like turning the element transparent. Other elements on the page will not move.
    • Use this when you need to hide an element but want to maintain a stable page layout and prevent other content from shifting.
// This removes the element and its space
element.style.display = 'none';

// This makes the element invisible but preserves its space
element.style.visibility = 'hidden';

Conclusion​

Using setTimeout to hide or show elements is a fundamental technique for creating dynamic and interactive web pages.

  • The setTimeout(callback, delay) function is the definitive tool for scheduling a future action.
  • Inside the callback, modify the element's CSS properties to change its appearance.
  • Choose display: 'none' to completely remove the element and its space from the page layout.
  • Choose visibility: 'hidden' to make the element invisible while preserving its original space in the layout.

Table of Contents