CODEWITHSUNDEEP
jqueryhtml
MaxWillmott
MaxWillmott

Reputation: 2220

Animate the Parent <div> when using class in jQuery

+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

Upvotes: 2

Views: 1370

Answers (3)

rgin
rgin

Reputation: 2311

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

Yeah, I think that does it.

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

Upvotes: 2

jancha
jancha

Reputation: 4967

replace 

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

with

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

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78520

$('.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.

Upvotes: 1

Related Questions