Unordered list show next and hide previous - JS fix

Question

 $('#loadMore').click(function () {

when #loadMore is clicked i want to show next 5 <li> and hide previous 5 <li> which is already showing there.

For Example when i click 1st time on load more

One -(hidden)
Two -(hidden)
Three-(hidden)
Four-(hidden)
Five-(hidden)

and

six -(show)
seven -(show)
eight -(show)
nine -(show)
ten -(show)

i tried to fix the code but there is little problem. once it hidden but then it show all element at once.

This is example of my JS code. and please prefer to fiddle

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

Fiddle Here : http://jsfiddle.net/6FzSb/4460/

Answer 1

Check this fiddle . Hope this is what you want.

Have changed the code using slice function like below.

var pageSize = 5;
var currentPage = 1;
var total = 0;
$(document).ready(function() {
total = $("#myList li").size();
$('#myList li:lt(' + pageSize + ')').show(500);

$('#loadMore').click(function() {
    if (total <= pageSize * (currentPage + 1)) {
        $("#loadMore").hide(500);
    }

    $("#myList li").hide(500);

    currentPage++;

    $("#myList li").slice(pageSize * (currentPage - 1), pageSize * currentPage).show(500);

    $("#showLess").show();
});
$('#showLess').click(function() {

    if (currentPage == 2) {
        $("#showLess").hide();
    }
    $("#myList li").hide(500);
    currentPage--;

    $("#myList li").slice(pageSize * (currentPage - 1), pageSize * currentPage).show(500);
    $("#loadMore").show();
});
});

Answer 2

It's not very clear what you want to happen here. Maybe you can update your question to clarify.

However I think the following will do what you want. I have removed the hide call in the #showMore event and the show call in the #showLess event.

$(document).ready(function () {
    var size_li = $("#myList li").size();
    var x=5;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show(500);
        $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<=0) ? 3 : x-5; /* Changed to <= so there are never 0 records */
        $('#myList li').not(':lt('+x+')').hide(500);
        $('#loadMore').show();
        $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});