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.


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

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.


// just to add some style


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.


$(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