Accordion open all button

Support
#1

Is it possible to have a line of text or button that will open all closed items in an accordion group. The when the items are open the text changes to close all and clicking on it will close all the items in the accordion group.

I imagine you would need some sort of code, not sure if that is CSS or javascript.

#2

Hey @waynepatt58,

That is possible with custom Javascript. Below is a sample code that should be added in Content JS. I’d recommend that you watch how to use it at https://youtu.be/C0SKvLotrfI. The button needs to have no href or URL to prevent the page from scrolling to the top.

jQuery(function($) {
  $('.acc-btn-toggle').on('click touchend', function() {
    $('.x-acc-header, .x-accordion-toggle').trigger('click');
  })
})

Please note that the code provided is only a guide. I’d recommend that you learn jQuery from http://jquery.com/. We can’t support issues that might arise from the use of custom code and further enhancement of it. For that, you’d need to consult with a third party developer.

Hope that helps and thank you for understanding.

#3

Thanks very much for that, and even a video!

Will go through it and see if I can get it to work.

#4

Glad we were able to help :slight_smile:

#5

I got the accordions to all open, but cannot get them to close, could you please have a look, the accordion only shows up on small screens.

#6

Hi There,

The provided code is working fine on my end:

Could you please remove all your custom Javascripts to check if it fixes the issue?

Also, I tried to login to your WP Dashboard but no luck. Please double check:

Thanks.

#7

Hopefully I gave you correct login details have attached secure not and logged in OK with the password.

I dont think I have entered the correct classes in the buttons ccs field, I only have on class in there, should there be more?

#8

Hi @waynepatt58,

Toggling off the accordion group option fixed it, could you try checking it again?

And the code is changed to this

jQuery(function($) {
  $('.acc-btn-toggle').on('click touchend', function(e) {
     e.preventDefault();
    $('.x-acc-header, .x-accordion-toggle').trigger('click');
  })
})

This should serve as a snippet, you may enhance it but we can’t provide or cover further customization.

Thanks!

#9

Many thanks, you guys are amazing, that works perfectly.

#10

You’re welcome!
We’re glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.