Javascript hide div and show another div with simple countdown

Question

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.

Answer 1

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

Answer 2

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>