Fade in next two elements on click

Question

I try to show two more div's, each time, a button is clicked. I have two problems.

1. It shows just one more on click (should show two)
2. It doesn't repeat after the first click

I already tried with a loop or repeat, but nothing worked. Where is the mistake?

$(".button").click(function() {
  $(".content").nextAll(':lt(2)').fadeIn("slow");
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>

Here is my fiddle: https://jsfiddle.net/x25Ldwaj/1/

Answer 1

Your logic is almost there, it's just the selector that's incorrect. You need to start from the last visible .content element, so you can use :visible:last, like this:

$(".button").click(function() {
  $(".content:visible:last").nextAll('.content:lt(2)').fadeIn("slow");
  $(this).toggle($(".content:visible:last").index() != $('.content').length);
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>