Huma Ali Huma Ali - 4 months ago 9
jQuery Question

jQuery selector for same classes

I have several divs inside a

OffersContainer
div. On Page load I show only the First div of
OffersContainer
. Then upon clicking the 'show more', I show first three divs and finally on clicking 'show more' for the second time I show all the divs.

Problem is I have two
OffersContainer
at a time. And I want these two
OffersContainer
div independent of each other. What actually happens is, when for the first time I click on left
OffersContainer's
show more it behaves perfectly i.e show 3 divs. But now when I click show more of right side OffersContainer's div it will show all instead of showing first 3 divs. It means its not working independently of the other div? How can I make it run separately?

P.S: For some reason both of these divs will have same class
OffersContainer
so I can't change the name. What am I doing wrong? Am I using wrong selectors?

Here is the Fiddle

And Here is the Fiddle with just one OffersContainer div just in case anyone wants to see

Answer

Don't store click information in shared global varibale. Instead you can persist it in the class name for each span:

$(".OffersContainer > div:gt(0)").hide();

$(".OffersContainer > span").click(function() {
    $(this).siblings($(this).hasClass('click') ? "div:gt(0)" : "div:lt(3)").slideDown();
    $(this).addClass('click');
});

Demo: https://jsfiddle.net/qo55rmuy/2/