Jquery click events not firing / distingishing between two identical HTML blocks

Question

Heres my page

http://tinyurl.com/7am4lo

If you find the red 'Special Offer' box, you'll see it expands when its header is clicked. There is another identical box at the bottom of the page. If you click that one too, you'll see my problem. The click event is firing both boxes. This was an oversight. My problem is that I cannot seem to get my alternative JS to work. I thought I could just use the next('div ') method (commented out in code sample) to locate the div and expand it. This doesn't seem to work.

Heres my current JS that fires the two boxes simultaneously:

//=====Special Offer Expanders START=====
     $('a.expand-offer').click(function(event){
      event.preventDefault();
      //$('a.expand-offer').next('div').slideToggle(200);
      $('div.offer-expander').slideToggle(200);
     });
//=====Special Offer Expanders END=====

Can anyone see a way of distinguishing between the two duplicate boxes in the JS so that they expand independently from one another? I considered adding '.top' and '.bottom' classes to the markup, but this is messy as I want to be able use the Special Offer Markup in a generic way, without adding unique classes.

Answer 1

Yup. Use $(this) to refer to the clicked element and move around like that.. I'm not sure how the third line would work (because I can't see your source) but I've uncommented the second line to give you an idea:

    $('a.expand-offer').click(function(event){
            event.preventDefault();
            $(this).next('div').slideToggle(200);
            //$('div.offer-expander').slideToggle(200);
    });

Answer 2

Sorry this is what I've tried so far:

$(this).next('div.offer-expander').slideToggle(200);
$(this).next('.offer-expander').slideToggle(200);
$(this).next('div').slideToggle(200);

None seem to work. ( I put this in the comment but it lacks code highlighting.)

Answer 3

Your "a.expand-offer" is inside another paragraph element, so you need to try and go one level up
try:

$(this).parent().next('div.offer-expander').slideToggle(200);