CODEWITHSUNDEEP
javascriptjquery
Gautam Jha
Gautam Jha

Reputation: 1473

Unordered list show next and hide previous - JS fix

 $('#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/

Upvotes: 0

Views: 64

Answers (2)

Prashant Shirke
Prashant Shirke

Reputation: 1423

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();
});
});

Upvotes: 2

Razzildinho
Razzildinho

Reputation: 2584

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();
        }
    });
});

Upvotes: 0

Related Questions