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
Check whether a variable exists and not empty in PHPPHPHow to display random posts in WordPress?WordPressHow to add multiple Columns in CSS like Bootstrap?CSSCSS align-items property examplesCSS4 advanced ways to search ColleagueColleagueSteps to Install Microsoft SQL Server on a MacOSSQL/MySQLHow to get front page or home page ID in WordPress?WordPressCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPHow to add a Pie Chart in Angular App?AngularWhat are Modules and Components in Angular?AngularHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQL:in-range and :out-of-range selector in CSSCSS