Show more content with click in different stages

September 7, 2023

I have following setup:

<div class="uncode-post-table">
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  ...
</div>
<a id="more-actions" onclick="event.preventDefault();" href="javascript:void(0);">Load more actions</a>

The list with the div.tmb will be extended by time, for now it contains 50 items.

In my CSS I have following line:

.uncode-post-table .tmb:nth-child(n+11) {
  display: none;
}

So it shows only the first ten .tmb div’s. What I want to do when I click the link is to appear the next 10 .tmb div’s in the list (so .tmb div 1-20 will show up). Another click on the link will show another 10 .tmb div’s (1-30). And so on, until all div’s are visible.

So far I have this in jQuery:

$("#more-actions").click(function(){
  $(".uncode-post-table .tmb").css("display", "block");
});

This will show all the .tmb div’s at once when the link is clicked.

I tried to find an answer here: Show more / show less with jQuery, it also shows the whole list instead of the next 10 div’s.
Also this one doesn’t really answer my question: Whats the best way to implement a "Show More" button with jQuery?

>Solution :

To show the next 10 and so on, after each click you can do it like this:

$("#more-actions").click(function() {
  $(".uncode-post-table .tmb:visible:last").nextAll("*:lt(10)").css("display", "block");
});

Demo

$("#more-actions").click(function() {
  $(".uncode-post-table .tmb:visible:last").nextAll("*:lt(10)").css("display", "block");
});

.uncode-post-table .tmb:nth-child(n+11) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uncode-post-table">
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
</div>
<a id="more-actions" onclick="event.preventDefault();" href="javascript:void(0);">Load more actions</a>