Hide a div with jQuery after set time - Easy tutorial

If you want to hide a specific div on your webpage after a certain amount of time, you can use jQuery to accomplish this task easily. With just a few lines of code, you can make your website more dynamic and interactive for your users.

Here's an easy tutorial on how to hide a div with jQuery after a set time:

First, you need to include the jQuery library in your HTML document by adding the following code to the head section:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Next, you need to create a function that will hide the div after a set time. Here's an example code that will hide a div with an ID of "myDiv" after 3 seconds:

<script>
  $(document).ready(function() {
    setTimeout(function() {
      $("#myDiv").hide();
    }, 3000);
  });
</script>

In this code, the setTimeout() function is used to delay the execution of the code inside the function by 3 seconds (3000 milliseconds). The $("#myDiv").hide() code is used to hide the div with an ID of "myDiv".

Finally, you need to add the div to your HTML document and give it an ID of "myDiv". Here's an example code:

<div id="myDiv">
  This is my div that will be hidden after 3 seconds.
</div>

And that's it! With just a few lines of code, you can hide a div on your webpage after a certain amount of time using jQuery. Try it out on your website and see how it enhances the user experience.

Click to rate this post!
[Total: 0 Average: 0]

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Go up

Below we inform you of the use we make of the data we collect while browsing our pages. You can change your preferences at any time by accessing the link to the Privacy Area that you will find at the bottom of our main page. More Information