title: jQuery load first 3 elements, click "load more" to display next 5 elements
body: <p>I have an unordered list:</p>
  
  <pre><code>&lt;ul id="myList"&gt;&lt;/ul&gt;
  &lt;div id="loadMore"&gt;Load more&lt;/div&gt;
  </code></pre>
  
  <p>I wish to populate this list with list items from another HTML file:</p>
  
  <pre><code>&lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
  &lt;li&gt;Five&lt;/li&gt;
  &lt;li&gt;Six&lt;/li&gt;
  &lt;li&gt;Seven&lt;/li&gt;
  &lt;li&gt;Eight&lt;/li&gt;
  &lt;li&gt;Nine&lt;/li&gt;
  &lt;li&gt;Ten&lt;/li&gt;
  &lt;li&gt;Eleven&lt;/li&gt;
  &lt;li&gt;Twelve&lt;/li&gt;
  &lt;li&gt;Thirteen&lt;/li&gt;
  &lt;li&gt;Fourteen&lt;/li&gt;
  &lt;li&gt;Fifteen&lt;/li&gt;
  </code></pre>
  
  <p>I want to load the first 3 list items, then show the next 5 items when the user clicks the "load more" div:</p>
  
  <pre><code>$(document).ready(function () {
      // Load the first 3 list items from another HTML file
      //$('#myList').load('externalList.html li:lt(3)');
      $('#myList li:lt(3)').show();
      $('#loadMore').click(function () {
          $('#myList li:lt(10)').show();
      });
      $('#showLess').click(function () {
          $('#myList li').not(':lt(3)').hide();
      });
  });
  </code></pre>
  
  <p>I need help though, as I would like the "load more" to show the next 5 list items, but if there are more list items within the HTML file, to again display the "load more" div and allow users to display the next 5 items, repeating this until the entire list is displayed.</p>
  
  <p>How can I best achieve this?</p>
  
  <p>I have created the following jsfiddle: <a href="http://jsfiddle.net/nFd7C/">http://jsfiddle.net/nFd7C/</a></p>