Open & Close v2 Accordions with v2 Buttons

[timmichar]

Hello,
I’ve read through numerous forum posts, and I can’t seem to target my issue properly.

That said, I’m attempting to open all v2 accordion elements on a page by clicking a v2 button.

Also, I’m then trying to close all v2 accordions with another v2 button.

I’ve read through the forum doing this with classic buttons, but I can’t seem to replace the classes correctly.

If you can point me in the right direction I’d appreciate it.

Thanks!

[ruenel]

Hello There,

Thanks for writing in!

I would highly recommend that you set up the page with your accordion and your two buttons to expand and collapse the accordion element items. Please do not forget to insert a custom class to your accordion and your button elements as well. Provide us the url of the page in your next reply and we can proceed from there. We just want to make sure that we give you a more tailored way of doing what you have in mind.

Thank you in advance.

[timmichar]

Thanks @RueNel. I added a secure note.

[nico]

Hi @timmichar,

I could see that you have it properly however I am not sure what JS that you used. In this case, please share us your admin credentials so we could fully view setup.

Don’t forget to set it in a secure note.

Thanks.

[timmichar]

Hello @nico. I added the information to the secure note.

[christian]

Hey Tim,

You have assigned the Close button a class of open_accordion. I changed it to close_accordion. Here’s the JS code I added in your page. You can see that it works in this screencast. If you notice, it does not animate like when you click the accordion header. It would require additional custom development to achieve that so you would need to hire a third party developer to continue that area. Also note that this and all the custom codes in the forum are only guides. They are not official parts of the theme therefore issues that would arise from the use of custom code and further enhancements would be outside the scope of our support.

jQuery(function($) {
  	$('.x-anchor-button.close_accordion').on('touchend click', function() {
  		$('.x-acc-header').removeClass('x-active');
		$('.x-acc-item div[role="tabpanel"]').addClass('x-collapsed');
	});
  	$('.x-anchor-button.open_accordion').on('touchend click', function() {
  		$('.x-acc-header').addClass('x-active');
		$('.x-acc-item div[role="tabpanel"]').removeClass('x-collapsed');
	});
});

Hope that helps.

[timmichar]

Thanks so much @christian_y! Kudos to you and your team!

Regards,
Tim

[Prasant]

You are most welcome, Tim. Thanks for the good words.