×

Please Login or Register to continue.

2
(2.6K Views)

I need help with JavaScript. I am using the jQuery library. I want to hide a div block in 10 seconds on a button click or page load using jQuery.I know this may be easy with jQuery but I don't know how to hide a div at a specific time duration. I am creating advertise on my website. The advertisement should be removed or hidden under 10 seconds or 5 seconds or 3 seconds. 

For example - 

<div class="ad">Hide advertise div block in 10 seconds</div>

Is it possible to hide div under 3 seconds or 5 seconds or 10 seconds?

html javascript jquery js
(2.4K Points)
in jquery
Answer
Share

2 Answers
(3.4K Points)
(edited)
1

It can be more complex in JavaScript, but you can easily hide a div in 10 seconds using the jQuery library. I was searching for the same solution and got the best solution. You can use the jQuery setTimeout() method and hide() method to hide a div block in 10 seconds, 3 seconds, or 5 seconds. In the setTimeout() method, you can set seconds in milliseconds. The hide() will use to hide a div block.

Let's understand with an example - 

<!DOCTYPE html>
<html>
<head>
   <title>Hide div in 10 seconds on page load in jQuery </title>
   <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
   <script type="text/javascript">
      setTimeout(function(){ 
       $("#ad").hide();
}, 10000);
   </script>
</head>
<body>
<div class="ad" id="ad">Hide advertise div block in 10 seconds, Please wait for 10 seconds</div>
</body>
</html>

Execute the above example and wait for 10 seconds. The advertisement div will be hidden after 10 seconds. 

You can set it for 3 seconds, or 5 seconds. 

1 second = 1000 milliseconds. 

10 seconds = 10000 milliseconds. 

3 seconds = 3000 milliseconds. 

5 seconds = 5000 milliseconds. 


Comment
(9.4K Points)
1

In the jquery library, there is a method setTimeout(). You can use it to hide a div in 10 seconds, 3 seconds, or 5 seconds from the page. You can use the hide() method to hide a div or the remove() method to remove a div from the page. Instead of this, you can use a CSS stylesheet to hide a div block in just 10, 3, or 5 seconds.

Remove a div from the page in 5 seconds using setTimeout() and remove() methods -

<!DOCTYPE html>
<html>
<head>
   <title>Remove a div after page loads in JS jQuery</title>
   <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
   <script type="text/javascript">
      setTimeout(function(){ 
       $(".ad").remove();
}, 5000);
   </script>
</head>
<body>
<div class="ad">Your ad code. Wait for 5 seconds..</div>
</body>
</html>

Hide a div in 10 seconds using a CSS stylesheet-

You can hide a div using CSS class only using the addClass() method- 

<!DOCTYPE html>
<html>
<head>
   <title>Hide a div using CSS stylesheet in 10 seconds</title>
   <style>
      .ad_hide{
        display: none;
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
   <script type="text/javascript">
      setTimeout(function(){ 
       $(".ad").addClass('ad_hide');
}, 10000);
   </script>
</head>
<body>
<div class="ad">Your ad code. Wait for 10 seconds..</div>
</body>
</html>

If you don't want to use the addClass() method then you can use CSS() method to hide a div. 

 $(".ad").css({'display': 'none'});

You can use one any example to hide any div with an id name and class name in 10 seconds, 3 seconds, or 5 seconds.

Reference - 

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

https://api.jquery.com/hide/

https://api.jquery.com/remove/

 


Comment

Related Questions :-

Your Answer

You can post your answer after login..