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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
3 Common Usability Mistakes In Web DesignUI/UXHow to Create a Copy of a Table in SQL and MySQL?SQL/MySQLList of social media icon logo color codes in HEXMiscellaneousHow to delete a local and a remote Git branches?MiscellaneousHow to use $IF operator in Envision Basic?Envision BasicWordPress: How to display fields from ACF Flexible Contents?WordPressUse eq() method in jQueryjQuery@forward rule in SCSS (Sass)SCSSWHERE Clause in PostgresPostgresHow to create a function in SCSS (Sass)?SCSSWhat’s the difference between a Framework and a Library?MiscellaneousHow to create a simple slider with CSS and jQuery?CSS