CODEWITHSUNDEEP
jqueryaccordion
kindofabigdeal
kindofabigdeal

Reputation:

Resetting a jQuery Accordion

I have two accordions on one page. I would like it so that when one is clicked/activated the other accordion (if opened) will return to its default folded state.

I have tried to manually recreate the functionality but it is too buggy and eventually doesn't let me expand accordions.

My code:

$('#chicago-accordion').accordion({ autoHeight: false, collapsible: true, active:false, });
    $('#chicago-accordion h2').click(function () { 
                $('#ny-accordion .accordion-content').slideUp(); 
                $('#ny-accordion h2').removeClass("ui-state-active"); 
                $('#ny-accordion .accordion-content').removeClass("ui-accordion-content-active"); 
                $('#ny-accordion').accordion({ clearStyle:true, });

         });


$('#ny-accordion').accordion({ autoHeight: false, collapsible: true, active:false, });
    $('#ny-accordion h2').click(function () { 
                $('#chicago-accordion .accordion-content').slideUp();
                $('#chicago-accordion .accordion-content').removeClass("ui-accordion-content-active"); 
                $('#chicago-accordion h2').removeClass("ui-state-active"); 
                $('#chicago-accordion').accordion({ clearStyle:true, });
         });
            });

Upvotes: 3

Views: 8513

Answers (3)

Pawan Jasoria
Pawan Jasoria

Reputation: 191

This will reset your accordion with no selected tab. Resetting through addClass/removeClass/attr will make your accordion looks good visually but it requires 2 clicks to activate previous selected tab.

$('.yourAccordion').accordion({
    active: false
});

Thanks

Upvotes: 0

Marleyzs
Marleyzs

Reputation: 155

Here's what I use to reset an single accordion:

$('.ui-state-active.ui-accordion-header').trigger('click');

To reset specific ones, you can use

$('.ui-state-active.ui-accordion-header.myclass1').trigger('click');

$('.ui-state-active.ui-accordion-header.myclass2').trigger('click');

Upvotes: 1

RaYell
RaYell

Reputation: 70444

The simplies solution I have found for that problem is to destroy and recreate the accordion.

var options = {autoHeight: false, collapsible: true, active:false};

$('#ac1').accordion(options);
$('#ac2').accordion(options);

$('#ac1').click(function () {
    $('#ac2').accordion('destroy').accordion(options);
});

$('#ac2').click(function () {
    $('#ac1').accordion('destroy').accordion(options);
});

Upvotes: 2

Related Questions