Hide all article and show them 5 by 5 when we click on next and preview

Question

I'm working on a jsfiddle, my goal here is when we click "prev/next" button, we can see 5 next or 5 prev articles but all others must be hidden.

At this time I can click on "prev / next" button, then we can see 5 next or 5 prev articles but all others articles who are already visible stay visible.

here is my example, may be someone have an easier idea :

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

#myList article{
display: none;
}

#loadMore {
color: green;
cursor: pointer;
}

#showLess {
color: red;
cursor: pointer;
}

#loadMore:hover, #showLess:hover {
color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div id="myList">
    <article>One</article>
    <article>Two</article>
    <article>Three</article>
    <article>Four</article>
    <article>Five</article>
    <article>Six</article>
    <article>Seven</article>
    <article>Eight</article>
    <article>Nine</article>
    <article>Ten</article>
    <article>Eleven</article>
    <article>Twelve</article>
    <article>Thirteen</article>
    <article>Fourteen</article>
    <article>Fifteen</article>
    <article>Sixteen</article>
    <article>Seventeen</article>
    <article>Eighteen</article>
    <article>Nineteen</article>
    <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

Answer 1

You can use the slice() as $(this).slice(start_index, end_index) to get the next or prev 5 elements.

$(document).ready(function() {
  size = $('#myList article').length;
  x = 5;
  $('#myList article:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    if (x + 5 > size) return;
    $('#myList article').hide();
    $('#myList article').slice(x, x + 5).show();
    x += 5;
  });
  $('#showLess').click(function() {
    if (x - 5 <= 0) return;
    $('#myList article').hide();
    x -= 5;
    $('#myList article').slice(x - 5, x).show();
  });
});

#myList article {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#showLess {
  color: red;
  cursor: pointer;
}

#loadMore:hover,
#showLess:hover {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>