Question

I’ve recently bought ‘Smashing jQuery’ by Jake Rutter – it’s a good book, but I’m stuck modifying a bit of ‘Accordion’ code.

When a section is clicked it expands as intended, but if clicked a second time (while still open) it closes only to instantly open again.

I want the expanded section to close if it’s clicked a second time, only opening again if it’s clicked. Hope this makes sense. Any help would be much appreciated.

Please see the demo URL below for an example and code I’ve used.
http://demos.d3-creative.com/accordion/accordion-1.html

Answer 1

You would need something like below to make it work. See the comments:

var $header = $('.accordion-header'),//always cache your selectors
    $content = $('.accordion-content');

$header.click(function () {

    var $this = $(this),
        $relatedContent = $this.next();

    if($relatedContent.is(':visible')) { // If the tab is already open

        $relatedContent.slideUp('fast');

        $this.find('.icon-active').removeClass('icon-active');

        $this.removeClass('header-active');

    } else { // if the tab is closed

        // Close any other opened tabs
        $content.slideUp('fast');
        $header.removeClass('header-active');
        $header.find('span').removeClass('icon-active');

       // Open related tab
        $relatedContent.slideDown('fast');

        $this.find('span').addClass('icon-active');

        $this.addClass('header-active');
    }

});

And add display:none to #accordion .accordion-content