"Expand All" and "Collapse All" toggle buttons for accordions

[steevka]

Hey all!

There was an old topic that helped me have these expand and collapse buttons at the top of my home page. On clicking, they either opened or closed all accordions on the page regardless of current state.

This old method no longer works with an updated X theme. Can someone help me recreate these functions?

Thank you!

[tristup]

Hi @steevka,

Thanks for reaching us.

Regretfully the new versions have the different set of class, and the old code will not work with that.
Even this is a part of customization, I would like to suggest you with few jQuery code that may help you in this.
Please add this below code in your Content JS area.

You need to add a Expand All button just above the accordion, with a class expand-all.

(function($){
$('.expand-all').on('click touchstart', function(e){
    e.preventDefault();
    $('.x-acc-header').trigger('click');
    $(this).toggleClass('expanded');
    var str='Collapse All';
    if(!$(this).hasClass('expanded'))
    {
        str='Expand All';
    }
    
    $(this).find('.x-anchor-text-primary').html(str);
});
})(jQuery);

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serve only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Hope it helps.

Thanks