Question

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.

Answer 1

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