Show 2 by 2 elements on click
<p>I have the following container:</p>

<pre><code>   &lt;div id="container"&gt;
        &lt;div id="1"&gt;1&lt;/div&gt;
        &lt;div id="2"&gt;2&lt;/div&gt;
        &lt;div id="3" style="display:none"&gt;3&lt;/div&gt;
        &lt;div id="4" style="display:none"&gt;4&lt;/div&gt;
        &lt;div id="5" style="display:none"&gt;5&lt;/div&gt;
        &lt;div id="6" style="display:none"&gt;6&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="more_results"&gt;Show 2 more results&lt;/div&gt;
</code></pre>

<p>How to: when I click on the show more div to display the next 2 hidden div (3 and 4).  And then if they click again show div (5 and 6)</p>

<p><a href="http://jsfiddle.net/ymorin007/wpbBJ/" rel="nofollow">DEMO jsFiddle.</a></p>
