How to hide div when list items are displayed

Question

Need som help with this script: I'm using this to load more li items (portfolio images) and can't figure out how to make the #loadMore div to .hide when all li items are displayed. Let's say there is a total of 8 list items.

Please help me out on this one!

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

});

Answer 1

Try by adding this code:

if($("#myList li:visible").length == $("#myList li").length){
  $('#loadMore').hide();
}

or this:

if($("#myList li").filter(":visible").length == $("#myList li").length){
  $('#loadMore').hide();
}

Answer 2

Try it like this

if($("#myList li:visible").length == $("#myList li").length){
  $('#loadMore').hide();
}