title: Make div appear one after another upon button submit in JavaScript
body: <p>I want the 2nd div to show for 3 seconds after clicking the submit button and the 3rd div to show after a certain time. I want the 2nd and 3rd div to show in the same height and width of the 1st div one after another.First the 2nd div shows up and after 3 sec 3rd div shows and returns to the first div All the divs are stacked inside the main container with position absolute to main container whose position is relative. This is to be done in JavaScript.</p>
  
  <p>Any help?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main-container"&gt;
      &lt;div class="first"&gt;
          &lt;button onclick="somefunction()"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="second"&gt;
      &lt;/div&gt;
      &lt;div class="third"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:   </p>
  
  <pre><code>.main-container,.first,.second,.third{
      height:100px;
      width:100px;
  }
  
  .main-container{
      position:relative;
      margin: 0px auto;
  }
  
  .first,.second.third{
      position:absolute;
      top:0px;
      left:0px;
  }
  
  .first{
      background-color:red;
  }
  
  .second{
      background-color:blue;
      display:none;
  }
  
  .third{
      background-color:green;
      display:none;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function start() {
    setTimeout("show_second()", 3000);
  }
  
  function show_second() {
    document.getElementById("second").style.display = "inline";
  }
  </code></pre>