CODEWITHSUNDEEP
jquery
user3777827
user3777827

Reputation: 344

Load more button should disappear

I am using some code to show content with load more button. Every thing is working fine. But only one thing that is causing problem is Load more button is still showing when all the content is loading. My query is the load more button should disappear when all the contents have been loaded.

html code for load more button:

<div id="loadMore"  class="g-btn type_primary size_big ldm" style="cursor:pointer;  display:none; width: 307px; margin: auto; font-size: 26px;  padding: 10px 0px; ">Load more Content</div>

Jquery code for load more:

$(document).ready(function () {

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

    if($('#myList li').length > 10) {
  //  $('#loadMore').show();
  $("#loadMore").css({"display":"block",

    });

}

    else {
   // $('#loadMore').hide();
   $("#loadMore").css({"display":"none",

    });
}
});

Upvotes: 2

Views: 6086

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You have syntax error in $("#loadMore").css({"display":"none",});. Remove , after none

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

    if ($('#myList li').length > 10) {
        //  $('#loadMore').show();
        $("#loadMore").css("display", "block");

    } else {
        // $('#loadMore').hide();
        $("#loadMore").css("display", "none");
    }
});

Or Simply use

$("#loadMore").hide() and $("#loadMore").show()

Edit

To get the number of displayed li use :visible selector

$('#myList li:visible').length

Updated Fiddle

Edit as per the requirement

var count = 5;
$('#myList li:lt(' + count + ')').show();
$('#showLess').hide();
$('#loadMore').click(function () {
    $('#showLess').show();
    count = $('#myList li:visible').length;
    $('#myList li:lt(' + (count + 5) + ')').show();
    if (count + 5 >= $('#myList li').length) {
        $(this).hide();
    }
});
$('#showLess').click(function () {
    $('#loadMore').show();
    count = $('#myList li:visible').length;
    $('#myList li:gt(' + (count - 5) + ')').hide();
    if ((count - 5) <= 5) {
        $(this).hide();
    }
});

Latest Fiddle Without hardcoding the length

Upvotes: 5

Related Questions