title: How can I hide elements in my list and add a 'show more' feature?
body: <p>I'm using javascript to build a list of results. I have a for-loop that iterates over some data and creates a mydata div, and adds that to the results div. Let's pretend it looks something like this:</p>
  
  <pre><code>&lt;div id="results"&gt;
      &lt;div class="mydata"&gt;data 1&lt;/div&gt;
      &lt;div class="mydata"&gt;data 2&lt;/div&gt;
      ...
      &lt;div class="mydata"&gt;data 20&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is <strong>only display 5 results at a time</strong>, and should the user wish to see more, they can click a <strong>show next 5</strong> or <strong>show more</strong> button (or something similar). Any ideas?</p>
  
  <p>Just to clarify, every time the user clicks "show more" I want to 'unhide' the next 5 elements, not ALL the remaining elements. So each click reveals more elements until all are displayed.</p>