How to show div multiple step using javascript?

Question

How to show div multiple step using javascript ?

i want to create code for

click on CLICK HERE first time it's will show one

click on CLICK HERE second time it's will show two

click on CLICK HERE third time it's will show three

click on CLICK HERE fourth time it's will show four

click on CLICK HERE fifth time it's will show five

http://jsfiddle.net/x53eh96o/

<style type="text/css">
    div{
    display: none;
}
  </style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
function myFunction() {
    document.getElementById("1").style.display = "block";
}
</script>

how can i do that ?

THANK YOU

Answer 1

First of all, it would be better to add a common class to your divs, in order to make the selection easier. Then you should select all of needed divs by class name, and pass through each of them, setting needed visibility.

http://jsfiddle.net/x53eh96o/7/

<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var i = 0;
    function myFunction() {
        var divs = document.getElementsByClassName("some_class");
        var divsLength = divs.length;
        for(var j = divsLength; j--;) {
            var div = divs[j];              
            div.style.display = (i == j ? "block" : "none"); 
        }          
        i++;
        if(i > divsLength) {
            i = 0; // for a cycle
        }

    }
</script>

UPDATE

And here is jquery example: http://jsfiddle.net/x53eh96o/8/

<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var i = 0;
    function myFunction() {
        var divs = $(".some_class");
        divs.hide().eq(i).css({display: 'block'});       
        i++;
        if(i > divs.length) {
            i = 0;
        }
    }
</script>

Answer 2

id values should not start with a number.

 div { display: none; } 

 <div id="show_1">one</div> <div id="show_2">two</div> <div id="show_3">three</div> <div id="show_4">four</div> <div id="show_5">five</div> <div onclick="myFunction()" style="display: block;">CLICK HERE</div> <script> var show = 0; function myFunction() { try { document.getElementById('show_' + ++show).style.display = "block"; } catch (err) { show-- for (i = show; i > 0; i--) { document.getElementById('show_' + i).style.display = "none"; show--; } } } </script>