This if statement doesn't work

Question

Play with it here: http://jsbin.com/ocicu4/4/edit

Simple Accordion, I only want one section open at a time.

I figured the if statement would work, but it doesn't.

        // Clicks on h3 show .sectionContent
        $('h3.sectionHeading').click(function() {
            if ($('h3.sectionHeading').next().is('.open')) {
                // Do nothing
            } else {
                // Find the exsisting div.open remove class and close it
                $('div.open').removeClass('open').animate(
                    {'height':'toggle'}, 'fast', 'linear'
                );
                // Make div next to h3 open and add class
                $(this).next().addClass('open').animate(
                    {'height':'toggle'}, 'slow', 'linear'
                );
            }
        });

Help appreciated :)

Answer 1

I've probably not understood what you're trying to do, but changing the line:

if ($('h3.sectionHeading').next().is('.open')) { // etc

To:

if ($(this).next().is('.open')) { // etc

Will fire the first if statement. As you're using the selector h3.sectionHeading the next() object will always be the same. I'm assuming you wanted the next element after the current selection?

Working example here.