CODEWITHSUNDEEP
javascriptjquery
HandsomeRob
HandsomeRob

Reputation: 445

.slideToggle class individually based on .click

Basically trying to write something like this. Click .button and it .slideToggle(s) it's associated .box Div. Nesting them inside a container div to try different methods.

I feel stupid, this has been asked many times. I've tried at least a dozen none of which I can get to work.

Code is here.

http://jsfiddle.net/BurRQ/25/

<div class="container">
    <div class="header">
        <a href="#" class="toggle">TOGGLE</a>
    </div>
    <div class="box">
        <p>Content</p>
    </div>
</div>​

Cheers.

Upvotes: 0

Views: 148

Answers (2)

Abhilash
Abhilash

Reputation: 1610

There are many ways to do this, here are three (since I can give them a name)

The family method: $(this).parent().siblings('.box').slideToggle();

The closest find method: $(this).closest('.container').find('.box').slideToggle();

The next parent method: $(this).parent().next().slideToggle();

Upvotes: 0

Gavin
Gavin

Reputation: 6394

You need to use the .parent method to move back into your header before trying to use .next.

http://jsfiddle.net/BurRQ/26/

Before

$('.toggle').click(function(){
    $(this).next('.box').slideToggle("slow");
}); // .click

After

$('.toggle').click(function(){
    $(this).parent().next('.box').slideToggle("slow");
}); // .click

Upvotes: 2

Related Questions