How to Create a jQuery Toggle Display for a Few Seconds?

Estimated read time 2 min read

To create a jQuery toggle display for a few seconds, you can follow these steps:

  1. Create an HTML element that you want to toggle display. Here’s an example:
<div id="message" style="display: none;">
  This message will be displayed for a few seconds.
</div>
  1. Add some JavaScript code that will toggle the display of the element when a button is clicked, and set a timer to hide the element after a few seconds. Here’s an example:
$('#toggle-button').click(function() {
  $('#message').show();
  setTimeout(function() {
    $('#message').hide();
  }, 3000);
});

This code will listen for a click event on a button with ID “toggle-button”, and show the message element by setting its display property to “block”. It will then use the setTimeout function to wait for 3000 milliseconds (3 seconds), and hide the message element again by setting its display property to “none”.

  1. Make sure to include jQuery in your HTML code before the script that you just created. Here’s an example:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  // Add the JavaScript code here
</script>

That’s it! Now, when the user clicks the toggle button, the message element will be displayed for 3 seconds and then hidden again. You can customize the display duration by changing the value in the setTimeout function.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply