CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapaccordion
ad_on_is
ad_on_is

Reputation: 1550

Twitter Bootstrap accordion toggle-all-button not working correctly

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/

Upvotes: 1

Views: 280

Answers (1)

Robb Sadler
Robb Sadler

Reputation: 735

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/

Upvotes: 1

Related Questions