Display More Divs when Anchor is Clicked?

Question

I'm not even sure what this would be called so I don't know what to look for, but what I'm trying to do is have a fixed button that will load more divs when it's clicked.

I have 15 divs with the class of "box" and I only want to display 3 divs with the class of "box". How would display 3 more divs until all 15 divs are displayed?

<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>

<a href="#" title="">Load 3 More boxes</a>

Answer 1

You should probably add an id or a class to your anchor so as to distinguish it from other anchors on the same page. After all, we wouldn't want all of them adding new div elements:

// Handle the click event of our anchor
$("a.addMore").on("click", function(e){
  // Show the next three hidden .box elements immediately
  $(".box:hidden:lt(3)").show(0, function(){
    // If there are no more hidden elements, remove our link
    !$(".box:hidden").length && $(e.target).remove(); 
  });
// Trigger a click to load in our first three
}).trigger("click");

Demo: http://jsbin.com/amituh/5/edit

Answer 2

See this fiddle(updated to remove the anchor): http://jsfiddle.net/MaqYL/5/

Initially:

   $(".box:gt(2)").hide();

On click of the anchor:

$("a").click(function(){
    var hiddens = $(".box:hidden");
    hiddens.slice(0,3).show();
    if(hiddens.length <= 3)
    {
        $(this).remove();
    }    
});

To prevent other anchors to do so, you better give an id to your anchor.

Answer 3

<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div id="garage" style="display:none">
  <div class="box">text text text text</div>
  <div class="box">text text text text</div>
  <div class="box">text text text text</div>
  <div class="box">text text text text</div>
  <div class="box">text text text text</div>
  <div class="box">text text text text</div>
  <div class="box">text text text text</div>
</div>

<a href="javascript:next3();" title="">Load 3 More boxes</a>

function next3() {
  var box = document.getElementById("garage");
  if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box);
  if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box);
  if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box);
}