Looping through DOM and show hide elements
<p>I have a group of records which are split into segements of 5 each wrapped around a div with an id and class.</p>

<p>e.g.</p>

<pre><code>&lt;div id="myid" class="myclass"&gt;
&lt;p&gt;record1&lt;/p&gt;
&lt;p&gt;record2&lt;/p&gt;    
&lt;/div&gt;
</code></pre>

<p>The first set of 5 records are displayed and the rest are hidden.
I have a link underneath that has click for more. Once clicked it will then show another 5, etc etc.</p>

<p>Each container has a class with an Off and an On. This tells me what div is showing and what div isnt.</p>

<p>Now I want to show each set of records on each indivudual click of the click.
I have done this code but does not seem to work. My knowledge in jquery is limited.</p>

<pre><code>$(document).ready(function () {

// get first reviewBulkContainer and show
$(".reviewBulkContainer:first").show().addClass("On");

$("#showMoreReviews").click(function (e) {
    e.preventDefault();
    $("#reviewContainer .reviewBulkContainer").each(function () {
        if ($(this).hasClass("Off")) {
            $(this).show();
            $(this).removeClass("Off");
            $(this).addClass("On");
            return;
        }

    });
});
</code></pre>

<p>But this ends up showing all record segments and not just one as a time.
Could anyone help me on this?</p>

<p>Thanks...</p>
