Question

I have got the following code:

<script type="text/javascript">
$("#contact_min").toggle(function(){
  $("#contact_min").animate({
    height: "300px"
  }, 1000 );
$(".arrow").html("&#x25bc;")
$(".popupcontent").html('foobar')
},
function(){
  $("#contact_min").animate({
    height: "28px"
  }, 1000 );
$(".arrow").html("&#x25B2;")
$(".popupcontent").html("")
});
</script>

<script type="text/javascript">
$(document).ready(function(){
   setTimeout(function(){
  $("#contact_min").animate({
    height: "300px"
  }, 1000 );
$(".arrow").html("&#x25bc;")
$(".popupcontent").html('foobar')
      }, 25000);

});
 </script>

This works perfectly, you can click on the div and it opens or you can wait 25 seconds and it opens. But When you click it, then wait 25 seconds, you have to click twice to close it again. This is because the timeout still opens the box, even when you clicked it already. Is there a way to stop the timeout after you click the box so the box doens’t open after 25 seconds?

Answer 1

Use clearTimeout()

var tOut = setTimeout(function(){
                       $("#contact_min").animate({
                              height: "300px"
                       }, 1000 );
                       $(".arrow").html("▼")
                       $(".popupcontent").html('foobar')
      }, 25000);

Then to clear this timeout do it like this, clearTimeout(tOut);