title: jQuery scroll show hidden content
body: <p>How do I make it so that by default, 6 div elements are shown on the page, and when a user scrolls to the bottom of the page, six more are loaded?</p>
  
  <p>If you see this <a href="http://jsfiddle.net/gRzPF/1/" rel="nofollow">example</a>, it has multiple divs. I want only 6 of them to be show initially, and each time the user reaches the bottom of the page, I want six more to be loaded, until you 'run out' of divs. </p>
  
  <p>So far I have tried experimenting with jQuery infinite scroll plugins, but they are not applicable in my case, as in fact the number of elements I have is very finite!</p>
  
  <p>How can this be accomplished using jQuery? Thanks in advance!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I believe one could set the rest of the divs to hidden (apart from the first 6), and trigger a function that loads six more when the bottom of the page is reached.</p>