JQuery nearest () help

Question

So, I have several containers with this markup on the page:

        <div class="box w400">
            <div class="box-header">
                <span class="expand-collapse">expand/collapse</span>
                <h3>Heading</h3>
            </div>
            <div class="box-content">
                <p>Some content here...</p>
            </div>
        </div>

And I'm trying to achieve this by clicking on the .expand-collapse range, div.box-content will move up or down (toggle).

Here is the jQuery I'm using, I am trying to achieve this with the closest ():

        $(document).ready(function() {
            $('.expand-collapse').click(function() {
                $(this).closest('.box-content').slideToggle('slow');
            });
        });

But for some reason it does not work :(

Answer 1

Try the following:

$(document).ready(function() {
    $('.expand-collapse').click(function() {
        $(this).parent().next('.box-content').slideToggle('slow');
    });
});

What selects the next sibling parent div, it does not use the closest.

Answer 2

closeest() . span .box-content. $('. box-content'). slideToggle ('slow');??

edit: , . (). .