javascript - onclick show div and after some seconds hide shown div

Javascript - onclick show div and after some seconds hide shown div

To implement a functionality where clicking on an element shows a div and then automatically hides it after a specified time interval using JavaScript, you can use the following approach:

Example Implementation

Assume you have a button or any clickable element, and you want to show a <div> when clicked, and then automatically hide it after a few seconds.

HTML

<button id="showButton">Show Div</button> <div id="myDiv" style="display: none;"> This div will be shown and then hidden after a few seconds. </div>

JavaScript

document.addEventListener("DOMContentLoaded", function() { var showButton = document.getElementById("showButton"); var myDiv = document.getElementById("myDiv"); showButton.addEventListener("click", function() { myDiv.style.display = "block"; // Show the div // Automatically hide the div after 3 seconds (adjust as needed) setTimeout(function() { myDiv.style.display = "none"; }, 3000); // 3000 milliseconds = 3 seconds }); });

Explanation

  1. HTML Structure:

    • button with id showButton triggers the display of div with id myDiv when clicked.
    • Initially, myDiv is hidden (style="display: none;").

  2. JavaScript:

    • The script waits for the DOM content to be fully loaded (DOMContentLoaded event).
    • It retrieves references to showButton and myDiv using getElementById.
    • showButton.addEventListener("click", function() { ... }) attaches a click event listener to showButton.
    • Inside the click event listener:
      • myDiv.style.display = "block"; sets the display property of myDiv to "block", making it visible.
      • setTimeout(function() { ... }, 3000); schedules a function to be executed after 3 seconds.
      • Inside the setTimeout callback, myDiv.style.display = "none"; hides myDiv again by setting its display property to "none".

  3. Adjustments:

    • Change the 3000 value in setTimeout to adjust the duration (in milliseconds) after which myDiv should be hidden.
    • You can customize myDiv's content and styling as per your requirements.

Notes

  • Ensure that the JavaScript code is placed after the HTML elements it references or use event delegation if needed.
  • This example uses vanilla JavaScript for simplicity. If you are using a framework like jQuery, you can achieve similar functionality with different syntax.
  • Consider accessibility and user experience aspects when implementing automatic hiding of elements.

By following this approach, you can create a simple yet effective mechanism to show and automatically hide a <div> element after a specified time interval when a button or element is clicked.

Examples

  1. JavaScript: Toggle Show and Hide Div

    • Description: Implement a function in JavaScript to toggle the display of a div element when clicking a button and hide it after a few seconds.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show and Hide Div</title> <style> .hidden { display: none; } </style> </head> <body> <button onclick="toggleDiv()">Toggle Div</button> <div id="myDiv" class="hidden"> This div will appear and then hide after a few seconds. </div> <script> function toggleDiv() { var div = document.getElementById('myDiv'); div.style.display = div.style.display === 'none' ? 'block' : 'none'; if (div.style.display === 'block') { setTimeout(function() { div.style.display = 'none'; }, 3000); // Hide after 3 seconds } } </script> </body> </html>

  2. JavaScript: Show and Hide Div with Delay

    • Description: Create a JavaScript function to show a hidden div when clicking a button and hide it after a specified delay.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show and Hide Div with Delay</title> <style> .hidden { display: none; } </style> </head> <body> <button onclick="showAndHide()">Show Div for 3 seconds</button> <div id="myDiv" class="hidden"> This div will appear and then hide after 3 seconds. </div> <script> function showAndHide() { var div = document.getElementById('myDiv'); div.style.display = 'block'; setTimeout(function() { div.style.display = 'none'; }, 3000); // Hide after 3 seconds } </script> </body> </html>

  3. JavaScript: Show and Auto Hide Div on Click

    • Description: Develop a JavaScript function to show a hidden div when clicking a button and automatically hide it after a few seconds.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show and Auto Hide Div on Click</title> <style> .hidden { display: none; } </style> </head> <body> <button onclick="showAndAutoHide()">Show Div for 5 seconds</button> <div id="myDiv" class="hidden"> This div will appear and then hide automatically after 5 seconds. </div> <script> function showAndAutoHide() { var div = document.getElementById('myDiv'); div.style.display = 'block'; setTimeout(function() { div.style.display = 'none'; }, 5000); // Hide after 5 seconds } </script> </body> </html>

  4. JavaScript: Toggle Visibility with Timeout

    • Description: Toggle the visibility of a div on button click and automatically hide it after a set timeout using JavaScript.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Visibility with Timeout</title> <style> .hidden { display: none; } </style> </head> <body> <button onclick="toggleVisibility()">Toggle Div</button> <div id="myDiv" class="hidden"> This div will appear and then hide after a few seconds. </div> <script> function toggleVisibility() { var div = document.getElementById('myDiv'); div.style.display = div.style.display === 'none' ? 'block' : 'none'; if (div.style.display === 'block') { setTimeout(function() { div.style.display = 'none'; }, 3000); // Hide after 3 seconds } } </script> </body> </html>

  5. JavaScript: Show and Hide Div with Animation

    • Description: Implement a JavaScript function to show a div with animation and hide it after a delay.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show and Hide Div with Animation</title> <style> .hidden { display: none; } .fadeIn { animation: fadeIn 1s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <button onclick="showWithAnimation()">Show Div with Animation</button> <div id="myDiv" class="hidden"> This div will appear with animation and then hide after a few seconds. </div> <script> function showWithAnimation() { var div = document.getElementById('myDiv'); div.style.display = 'block'; div.classList.add('fadeIn'); setTimeout(function() { div.style.display = 'none'; div.classList.remove('fadeIn'); }, 3000); // Hide after 3 seconds } </script> </body> </html>

  6. JavaScript: Delayed Show and Hide

    • Description: Create a JavaScript function to delay the display of a div, show it, and then hide it after a specified duration.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Delayed Show and Hide</title> <style> .hidden { display: none; } </style> </head> <body> <button onclick="delayShowAndHide()">Delay Show and Hide</button> <div id="myDiv" class="hidden"> This div will appear after a delay and then hide after 3 seconds. </div> <script> function delayShowAndHide() { var div = document.getElementById('myDiv'); setTimeout(function() { div.style.display = 'block'; setTimeout(function() { div.style.display = 'none'; }, 3000); // Hide after 3 seconds }, 1000); // Show after 1 second } </script> </body> </html>

  7. JavaScript: Show Div on Click and Auto Hide

    • Description: Implement a JavaScript function to show a div when clicking a button and automatically hide it after a timeout.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show Div on Click and Auto Hide</title> <style> .hidden { display: none; } </style> </head> <body> <button onclick="showAndAutoHide()">Show Div and Auto Hide</button> <div id="myDiv" class="hidden"> This div will appear and then hide after a few seconds. </div> <script> function showAndAutoHide() { var div = document.getElementById('myDiv'); div.style.display = 'block'; setTimeout(function() { div.style.display = 'none'; }, 3000); // Hide after 3 seconds } </script> </body> </html>

More Tags

C# class hwndhost nss activity-finish asp.net-mvc-4 trigonometry ecmascript-harmony arm resttemplate

More Programming Questions

More Everyday Utility Calculators

More Transportation Calculators

More Bio laboratory Calculators

More Livestock Calculators