Yogesh Chauhan's Blog

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

in HTML & JavaScript on April 19, 2020

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)
})

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
perspective property in CSSCSSJavaScript Number MethodsJavaScriptClasses in JavaScript: The BasicsJavaScriptSome interesting HTML Input Attributes to rememberHTMLHow to create a smooth scrolling effect with CSS?CSSINNER JOIN in PostgresPostgresHow to refresh a page using PHP at regularly occurring intervals?PHPHow to use $IF operator in Envision Basic?Envision BasicSafe Practice to add Links to cross-origin destinationUI/UXHow to create a pricing table using flex in CSS?CSSRBV Framework and closing of big brandsMiscellaneousLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHP