Twitter Bootstrap accordion toggle-all-button not working correctly

Question

When I want to use one button to toggle all accordion-elements and some of them are already open, the toggle functionality behaves extremely strange.

If I implement this code:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse').collapse('hide');
        mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse').collapse('show');
        mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
}); 

My expected result is: first click, close all elements, that are open, second click open all elements, third click close all, etc.

What happens instead: first click, opened elements get closed, BUT closed elements get opened, second click opened elements get closed (all elements closed), third click, all elements open, fourth click, all elements open, etc.

See demo here:

http://jsfiddle.net/Lwrhk/

Answer 1

Working on the same issue, I found your question and played with your fiddle and got it to work by only acting on the elements that have been expanded or collapsed:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse.in').collapse('hide');
        //mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse:not(.in)').collapse('show');            
        //mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
});

Working jfiddle is here:

http://jsfiddle.net/RobbSadler/Lwrhk/12/