CODEWITHSUNDEEP
javascriptjquery
James Andrew Smith
James Andrew Smith

Reputation: 1566

Looping through DOM and show hide elements

I have a group of records which are split into segements of 5 each wrapped around a div with an id and class.

e.g.

<div id="myid" class="myclass">
<p>record1</p>
<p>record2</p>    
</div>

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.

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

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.

$(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;
        }

    });
});

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

Thanks...

Upvotes: 1

Views: 117

Answers (1)

Ram
Ram

Reputation: 144699

There is no need to use each method, you can use :first selector if you want to show the first element with class of Off.

$("#showMoreReviews").click(function (e) {
    e.preventDefault();
    $("#reviewContainer .reviewBulkContainer.Off:first")
                                          .show()
                                          .toggleClass("Off On");
});

Upvotes: 2

Related Questions