CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3600217
user3600217

Reputation: 69

Javascript hide div and show another div with simple countdown

is there any way to hide div show another div using javascript?

<div class="div1">"here must show countdown 10 seconds"</div>
<div class="div2">"show this div after countdown"</div>

for example: when page loaded, div1 must display and it must have 10 seconds countdown. when countdown is done then hide div1 and show div2

Thanks for who answer my question.

and Thanks for RTPMatt answered me once but it didn't work.

Upvotes: 0

Views: 1773

Answers (2)

Hemant
Hemant

Reputation: 2059

Please try this 

    <script language="javascript">
    var timeout,interval
    var threshold = 10000;
    var secondsleft=threshold;

    window.onload = function()
    {
        startschedule();
    }

     function startChecking()
     {
        secondsleft-=1000;
        document.querySelector(".div1").innerHTML = "Activating in " + Math.abs((secondsleft/1000))+" secs";  
        if(secondsleft == 0)
        {
            //document.getElementById("clickme").style.display="";
            clearInterval(interval);
            document.querySelector(".div1").style.display="none";
            document.querySelector(".div2").style.display="";
        }
    }
    function startschedule()
    {
          clearInterval(interval);
          secondsleft=threshold;
          document.querySelector(".div1").innerHTML = "Activating in " + Math.abs((secondsleft/1000))+" secs";  
           interval = setInterval(function()
           {
               startChecking();
           },1000)              
   }

   function resetTimer()
   {
        startschedule();
   }
</script>
    <div class="div1">"here must show countdown 10 seconds"</div>
    <div class="div2" style="display:none;">"show this div after countdown"</div>

Upvotes: 2

Royi Namir
Royi Namir

Reputation: 148524

You might try this : 

$(function (){
 $("#div1").show();
 setTimeout(function(){$("#div1").hide(); $("#div2").show();},10*1000)
})

When dom is loaded , you show div1. then you start a timer which when pulse , hides div1 and show div2

Upvotes: 2

Related Questions