Animate the Parent <div> when using class in jQuery

Question

+More
Each block will have an article summary in it.

  <div class="contentBlockTwo"> <span class="moreButton">+More</span> <br /> Or new flashes.</div> 

As you can see I have my "spans" as the same class so I can apply the following jQuery to them:

  $('.moreButton').click(function () { $('.moreButton').parent().animate({ width: '98%' }, 800); }); 

But no matter which of the "span" items I click, ALL of the "Divs" have the animation applied to them.

How can I apply the animation to the parent of the sender/ clicked "span" without giving each "div" an ID?

Thanks

Answer 1

replace

$('.moreButton').parent().animate({ width: '98%' }, 800);

with

$(this).parent().animate({ width: '98%' }, 800);

Answer 2

http://jsfiddle.net/53TjS/1/

Yeah, I think that does it.

$(this).parent('div').animate(...)

Answer 3

$('.moreButton').click(function () {
    $(this).parent().animate({ width: '98%' }, 800);
});

You need to use the this object otherwise it is re-selecting the parent elements of all .moreButton rather than the one you clicked.