title: How to show/hide forms & divs with button submit and then timer
body: <p>again as always, thanks for your time. this is driving me crazy.</p>
  
  <p>Note: at no point do i want the page to refresh.</p>
  
  <p>I have a form then a loading bar image then a linked button. the main page starts off with just a form and a submit button</p>
  
  <p>What i would like to do is when the form is submitted the whole <code>div</code>(1)&amp; its inside and its contents to disappears, then simultaneously a new <code>div</code>(2) in its place, appears with a <code>loading.gif</code> image and the <code>submitted entry</code>, then after 5 secinds this div disappears and in its place another <code>div</code>(3) with a <code>button</code> link and text inside appears</p>
  
  <p><code>div1</code>: shows form till button click, 
  <code>div2</code>: then loading image for 5 secs
  <code>div3</code>: link and text stays visible </p>
  
  <p>My code as is (nothing hides with it and divs are showin when there not meant to be) </p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
  
   &lt;script type="text/javascript"&gt;
   function countdown() {
   var i = document.getElementById('counter');
   if (parseInt(i.innerHTML)&lt;=0) {
      location.href = '#';
      clearInterval(t);
      exit;
   }
    i.innerHTML = parseInt(i.innerHTML)-1;
   }
   var t = setInterval(function(){ countdown(); },1000);
   &lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
   &lt;!--1. Show until submit then hide --&gt;
   &lt;div id="div1"&gt;
   &lt;form action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" method="POST"&gt;
   Answer: &lt;input type="Text" Name="info" required&gt;
   &lt;input type="Submit" value="Send"&gt;
   &lt;/form&gt;
   &lt;/div&gt;
  
    &lt;!--2. Show for 5 seconds on submit then hide  --&gt;   
   &lt;div id="div2"&gt;
   &lt;?php
   if (count($_POST) &gt; 0 &amp;&amp; isset($_POST["info"])){
   // add First and Second Numbers
   $sum = $_POST["info"];
   // their Answer is diplayed 
   echo "&amp;nbsp; Your answer $sum". "&lt;br /&gt;";
   echo '&lt;img src="http://i.imgur.com/nh9eh0c.gif" border=0&gt;'. "&lt;br /&gt;";
   echo '&amp;nbsp; Submiting answer in &lt;span id="counter"&gt; 5&lt;/span&gt;' . "&lt;br /&gt;";
   // after 5 secounds this hides and is replace with a button link and the text "thank you"
   } ?&gt;
   &lt;/div&gt;
  
   &lt;!--3. Show after 5 seconds above then nothing  --&gt;  
   &lt;div id="div3"&gt;
   &lt;?php  
   echo 'Back home'. "&lt;br /&gt;";
   echo '&lt;a href="https://www.google.co.nz/"&gt;&lt;img src="http://www.skeletonsthemovie.com/images/home-button-large.png" border=0&gt;&lt;/a&gt;';
   ?&gt;
   &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Hope this isn't to confusing it was quite hard to word properly.. any help would be amazing ! </p>