Huma Ali Huma Ali - 3 months ago 4x
jQuery Question

jQuery selector for same classes

I have several divs inside a

div. On Page load I show only the First div of
. 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
at a time. And I want these two
div independent of each other. What actually happens is, when for the first time I click on left
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
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


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();