jQuery load first 3 elements, click “load more” to display next 5 elements

Show more and less

by Shree Khanal

HTML

<div id="lnkGroup">
  
  <a>One</a>
    <a>Two</a>
    <a>Three</a>
    <a>Four</a>
    <a>Five</a>
    <a>Six</a>
    <a>Seven</a>
    <a>Eight</a>
    <a>Nine</a>
    <a>Ten</a>
    <a>Eleven</a>
    <a>Twelve</a>
    <a>Thirteen</a>
    <a>Fourteen</a>
    <a>Fifteen</a>
    <a>Sixteen</a>
    <a>Seventeen</a>
    <a>Eighteen</a>
    <a>Nineteen</a>
    <a>Twenty one</a>
    <a>Twenty two</a>
    <a>Twenty three</a>
    <a>Twenty four</a>
  </div>

<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

CSS

#lnkGroup a{
  display: none;
}
#showLess {

    display: none;
}

JavaScript

$(document).ready(function () {

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