YogeshChauhan . com

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

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Pagination in CSS with multiple examplesCSSHow to change style of all direct children of an element using jQuery?jQueryHow does @extend rule work in SCSS (Sass)?SCSSHow to get start index and end index (as int) of substring in Swift?SwiftIN Operator in PostgreSQLPostgresHow to get Current Hour, Minute and Second in JavaScript?JavaScriptHow to remove trailing characters from a string using JavaScript?JavaScriptHow to Recognize an Array in JavaScript?JavaScriptIs monitoring an employee’s work on a computer a desirable or undesirable activity?MiscHow to overwrite file contents with new content in PHP?PHPWordPress: How to loop through a repeater field in ACF?WordPressHow to hide and show menu on scroll using JavaScript and CSS?CSS