Click a button to Expand and Collapse all accordions

[user708824936]

Hi everyone,

I am trying to add two buttons, “Expand All” and “Collapse All” for my accordion page. So far I can do “collapse all” with this code

(function($){
$(’#collapse-all’).on(‘click touchstart’, function(){
$(’.x-acc-header.x-active’).trigger(‘click’);
});
})(jQuery);

However, I cannot make the “Expand All” button work.

Can someone help me out here?

Thanks

[rad]

Hi @user708824936,

Thanks for reaching out.

That same code can expand it since it’s a toggle, you should remove .x-active from the code to make the toggle works.

Thanks!

[user708824936]

Hi Rad,

Thank you for your reply.

Remove the.x-active will not make it a “expand all”, it will expand the collapsed and collapsed accordion and collapse the expanded ones. Like you said it will toggle them. However, I wish to expand all of them, regardless of their current status.

Could you please help me one that?

[friech]

Hi @user708824936,

@user708824936

it will expand the collapsed and collapsed accordion and collapse the expanded ones.

On this case, please negate the .x-active using the :not selector.

This way it will not affect the accordion that has already the .x-active class.

Not class selector in jQuery

You can also use an If conditional statement:

jQuery if statement

Please do mind that we won’t be able to provide customization support further from here, it would be your responsibility to take it from here.

Thanks,