Accordian V2 Close Button in Content

[strobley]

Hi Themeco,

I’ve created a link as content inside the Accordion V2 element that, when clicked closes its container accordion.

I’ve figured out most of Javascript it works by:

1. On the accordion header < button > tag removing class x-active, setting aria-selected and aria-expanded to false.
2. On the the accordion panel < div > tag adding class x-collapsed and setting aria-hidden to true.

When clicking the link inside the accordion content the accordion does close. However to reopen it, I need to click the accordion header twice instead of once to reopen it.

I think I’m missing some setting, would you be able to point to the javascript code in the theme which controls the accordion, I can try and figure out what I’ve missed.

[thai]

Hi @strobley,

Would you mind providing us with your website URL and your custom code so we can take a closer look?

Please consider that the theme code customization is outside of our support scope and we will not be able to implement such a functionality for you. but we will do our best to show you what is the standard way of doing the customization in X.

Regards!

[strobley]

Many thanks.

I’m working locally with ES6 module.

The base of the JavaScript code is:

const elAccordianButon = document.querySelector('.my-custom-accordian-item-class button')
const elAccordianPanel = document.querySelector(".my-custom-accordian-item-class [id^='panel']")

function fncCollapseAccordian() {
  elAccordianPanel.classList.add('x-collapsed')
  elAccordianPanel.setAttribute('aria-hidden', 'true')
  elAccordianButon.classList.remove('x-active')
  elAccordianButon.setAttribute('aria-selected', 'false')
  elAccordianButon.setAttribute('aria-expanded', 'false')
}

const elAccordianCollapse = document.querySelector('.my-custom-collapse-class')

if (elAccordianCollapse) {
  elAccordianCollapse.addEventListener('click', fncCollapseAccordian)
}

The steps are:

1. add a custom class to the accordion item element in the builder
2. Inside the accordion content add a collapse link class which can, either as a class to a button or simply a span tag in the content like:

<span class="my-custom-collapse-class">Custom Collapse Link</span>

As you can see the Javascript has:

two variables, for the button and panel

a function which add/removes classes accordingly on clicking my collapse link inside the accordion content.

a variable for the content collapse link class

a listener event for the on click event to call the function.

It only needs to invoke a collapse as the collapse link is inside the content so it can never expand the panel.

As I said, it works, however if the accordion is collapsed with my content Custom Collapse Link the accordion header button needs to be clicked two times to expand again.

Not using Custom Collapse Link and just using the accordion header button the panel expands correctly with only one click of the header.

[thai]

Hi @strobley,

Please try with this solution instead:

jQuery(document).ready(function($) {
	$('.my-custom-collapse-class').on('click touchend', function(event) {
		event.preventDefault();
		var accordion = $(this).closest('.my-custom-accordian-item-class'),
			panel = $(this).parent().parent(),
			toggle = panel.attr('data-x-toggleable');
			
		console.log(toggle);

		accordion.find('button[data-x-toggleable="'+toggle+'"]').trigger('click');
	});
});

The custom button: <span class="my-custom-collapse-class">Custom Collapse Link</span>

Don’t forget to add this my-custom-accordian-item-class class to your accordion.

Hope it helps

[strobley]

Thanks ever so much @thai - awsome and works like a charm! Really appreciate you help

One thing I changed was

panel = $(this).parent().parent(),

to

panel = $(this).parents("[id^='panel']"),

To allow the collapse-class to be nested at any level down the DOM tree.

[friech]

We are delighted to assist you with this.

Cheers!