To show a DIV element after x seconds in JavaScript, you can use the setTimeout() function.

Here’s an example that shows a DIV with the id “myDiv” after 5 seconds:

<div id="myDiv" style="display: none;">This is my DIV</div>
<script>
    setTimeout(function(){
        document.getElementById("myDiv").style.display = "block";
    }, 5000);
</script>

In this example, the setTimeout() function is set to call an anonymous function after 5000 milliseconds (5 seconds). Inside the anonymous function, the style.display property of the “myDiv” element is set to “block”, which makes the DIV visible on the page.

Alternatively, you can use setTimeout function directly on the function that change the display property.

<div id="myDiv" style="display: none;">This is my DIV</div>
<script>
    setTimeout(() => document.getElementById("myDiv").style.display = "block", 5000);
</script>

Note:

In both examples, it’s important to set the display property of the DIV to “none” in the HTML, so that it is hidden when the page loads.
The setTimeout() function only runs once after the specified time, if you want the DIV to reappear after the same time again you need to wrap the setTimeout in a function and call it again after it finished once.

Also Read:

Categorized in:

JavaScript

Tagged in:

,