When you press the div button, display 1 on 1 (one at a time)

Question

I have 10 with the same class. I want only 2 divs displayed when the page loads and after clicking on the button load the next div more. Thus, after clicking on each button with additional load, the next single div should be displayed.

I tried with the code below but could not succeed.

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

HTML structure

<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 set up the last visible div, and then the next and show it.

Answer 2

Js script 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 css line

 .design-derection{ display:none;}