How to Hide HTML elements automatically after few seconds using JavaScript?

Just add the HTML element. Div or any other element.

HTML

<div id="hide_the_div">
  This div will hide automatically after 10 seconds
</div>

Add some CSS to make it visible. You can just purely use text for this example. No need to use CSS just to see how it works.

CSS

// just to add some style

#hide_the_div{
  width:200px; 
  color:green; 
  padding:2%; 
  text-align:center;
}

Lastly, add a jQuery function calling the method fadeOut on div element using the ID of the element. 10000 = 10 seconds so you can adjust the time according to your need.

JavaScript

$(function() {
  setTimeout(function() { $("#hide_the_div").fadeOut(2000); }, 10000)
})

Share this post