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!
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>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>