title: Show more elements on button click?
body: <p>I'm trying to show 5 elements on my page and then have a function to load/show 5 more and this process can continue until there is no more hidden elements left.</p>
  
  <p>I have created a fiddle to show you what I have done so far: <a href="https://jsfiddle.net/89v781rL/2/" rel="nofollow noreferrer">https://jsfiddle.net/89v781rL/2/</a></p>
  
  <p>Currently, when the button is clicked, all the hidden elements are shown at the same time which is not what I want. I need to add 5 more elements to the ones that are in display at the time..</p>
  
  <p>I tried something like this but it doesn't work:</p>
  
  <pre><code>$('#grid li').not(':visible').each( function() {    
    $("#grid").children(":gt(4)").hide();
  });
  </code></pre>
  
  <p>This is my full working code:</p>
  
  <pre><code>$("#grid").children(":gt(4)").hide();
  
  $('#sales').click(function() {
      $('#grid li').not(':visible').each( function() {
        $(this).slideDown();
      });
  });
  </code></pre>