Mr7-itsurdeveloper Mr7-itsurdeveloper - 6 months ago 42
CSS Question

Hide "load more" button when all items displayed

I want to hide 'load more' button when all items displayed even items are 3 or 10 or 25...just hide 'load more ' button when all items loaded



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

});

#myList li{ display:none;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}

<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>

</ul>
<div id="loadMore">Load more</div>




Answer

Use the statement .toggle( display )

Use true to show the element or false to hide it.

$('#loadMore').click(function() {
    x = (x + 5 <= size_li) ? x + 5 : size_li;

    //Add this
    $(this).toggle(x < size_li);
});

$(document).ready(function() {
  size_li = $("#myList li").size();
  x = 3;
  $('#myList li:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    x = (x + 5 <= size_li) ? x + 5 : size_li;
    $('#myList li:lt(' + x + ')').show();
    $(this).toggle(x < size_li);
  });

});
#myList li {
  display: none;
}
#loadMore {
  color: green;
  cursor: pointer;
}
#loadMore:hover {
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>

</ul>
<div id="loadMore">Load more</div>

Comments