Make div appear one after another upon button submit in JavaScript

Question

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.

Any help?

HTML:

<div class="main-container">
    <div class="first">
        <button onclick="somefunction()">Submit</button>
    </div>
    <div class="second">
    </div>
    <div class="third">
    </div>
</div>

CSS:

.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;
}

Javascript:

function start() {
  setTimeout("show_second()", 3000);
}

function show_second() {
  document.getElementById("second").style.display = "inline";
}

Answer 1

You can chain the setTimeout s.

Also you are using getElementById , but you haven't given the elements IDs, just classes, so you'll need to add those too:

 function start() { setTimeout("show_second()", 3000); } function show_second() { document.getElementById("first").style.display = "none"; document.getElementById("second").style.display = "block"; setTimeout("show_third()", 3000); } function show_third() { document.getElementById("second").style.display = "none"; document.getElementById("third").style.display = "block"; } 

 .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; } 

 <div class="main-container"> <div id="first" class="first"> <button onclick="start()">Submit</button> </div> <div id="second" class="second"> </div> <div id="third" class="third"> </div> </div>