Hide Button onClick to Show Notice Text, then after 5 seconds, Hide Text Again & Re-Show the Button

user_10158254 0
Viewed 559

I want to show the (i) image as a button and when someone click on it, I want to hide the button and show the Notice: thanks for your patience! text, and after 5 seconds I want to re-display the button and hide the text as it was.

<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button>

<div class="info-hide">Notice: thanks for your patience!</div>

I tried with this code, but didn't work:

<script type="text/javascript">
setTimeout(function hideText() {
    $("#hide").fadeOut(".info-hide");
}, 5000);
</script>

Thank you!

javascript
2 Answers

function hideText() {
      $("#hide").fadeIn()
   setTimeout(() => {
      $("#hide").fadeOut()
  }, 5000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button>

<div class="info-hide" id="hide" style="display: none;">Notice: thanks for your patience!</div>

user_156277330

Try the following:

<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button>

<div class="info-hide" style="display:none">Notice: thanks for your patience!</div>

<script>
  
  function hideText() {
    // hides text for 5 secs  
    
    const btn = document.querySelector('#info');
    const infoHide = document.querySelector('.info-hide');
    
    infoHide.style.display = "block"
    btn.style.display = 'none'
    setTimeout(()=>{btn.style.display = 'block'; infoHide.style.display= "none"}, 5000)
    
  }

</script>

user_89300250
Related