On click of button div display 1 by 1 (single at a time)

Question

I have 10 <div> with the same class. I want Only 2 div visible when the page load and after clicking on a load more button the next div should show. This way after click on every load more button the next single hide div should display.

I have tried with below code but unable to success.

<script type="text/javascript">
    $( "#loadmore" ).click(function() {
        $(".design-derection").one( "div" ).show();
    });
    </script>

Html Structure is

<div class='content-block'>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class="view-more" id="loadmore">
                <a href="javascript:void(0);">View More Ranges</a>
            </div>
</div>

Answer 1

You can do something like this.

$( "#loadmore" ).click(function() {
    $(".design-derection:visible").last().next().show()
});

Just target the last visible div and after that the next one and show it.

Answer 2

Js fiddle demo

HTML

<ul id="myList">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        <li>Thirteen</li>
        <li>Fourteen</li>
        <li>Fifteen</li>
        <li>Sixteen</li>
        <li>Seventeen</li>
        <li>Eighteen</li>
        <li>Nineteen</li>
        <li>Twenty one</li>
        <li>Twenty two</li>
        <li>Twenty three</li>
        <li>Twenty four</li>
        <li>Twenty five</li>
    </ul>
    <div id="loadMore">Load more</div>
    <div id="showLess">Show less</div>

Javascript

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+1 <= size_li) ? x+1 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-1<0) ? 1 : x-1;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

CSS

 #myList li{ display:none;
    }
    #loadMore {
        color:green;
        cursor:pointer;
    }
    #loadMore:hover {
        color:black;
    }
    #showLess {
        color:red;
        cursor:pointer;
    }
    #showLess:hover {
        color:black;
    }

Answer 3

You can do something like this

$(document).ready(function () {
  size_li = $(".design-derection").size();
  x=2;
  $('.design-derection:lt('+x+')').show();
  $('#loadmore').click(function () {
    x= (x+1 <= size_li) ? x+1 : size_li;
    $('.design-derection:lt('+x+')').show();
 });

});

and added a line of css

 .design-derection{ display:none;}