title: display more divs when clicking button jquery
body: <p>I have divs that are hidden, the first one is displayed, I want to click a button to display a div, each time I click the load more link, then disable the link once all the divs have been loaded.</p>
  
  <p>Here is a jsfiddle to help illustrate what I am trying to do: <a href="http://jsfiddle.net/8Re3t/1/" rel="nofollow">http://jsfiddle.net/8Re3t/1/</a></p>
  
  <pre><code>&lt;p&gt;&lt;a href="#" id="load-more"&gt;Load More&lt;/a&gt;&lt;/p&gt;
  
  &lt;div class="group active" id="group1"&gt;
      Initially display
  &lt;/div&gt;
  
  &lt;div class="group" id="group2"&gt;
      1 Hide until you click load more
  &lt;/div&gt;
  
  &lt;div class="group" id="group3"&gt;
      2 Hide until you click load more
  &lt;/div&gt;
  
  &lt;div class="group" id="group4"&gt;
      3 Hide until you click load more
  &lt;/div&gt;
  
  $("#load-more").click(function() {
    // show the next hidden div.group, then disable load more once all divs have been displayed
  });
  </code></pre>