philbuchanan

Unfortunately this is not possible. The way to create separate groups of accordions is to place them in separate containers (i.e. separate divs). As you mentioned, separate columns count as separate containers. There is no way to disable the accordion grouping feature for a page.

The ability to expand/collapse all is on my radar, but not something I have had time to implement yet. Not sure when I will be able to get to it. You can track the progress for this issue on Github.

Yes. You can use any blocks you want inside the accordion content. Even other accordion blocks.

Unfortunately, no. There is no way to enable the accordions only on mobile.

You could possibly write some custom CSS to force the accordions to always display, but the click events would still be registered. It would be a “hack” type of solution.

There may be other accordion plugins that will meet you needs.

This plugin doesn’t support adding links to the titles. The whole title acts as the trigger to open/close the accordion.

The link provided is working for me in Chrome and Firefox (incognito windows). I will mention, you site loads fairly slow, and the accordions will not function until the entire site has loaded, so that could be why you are seeing the issues. There also appears to be a number of console errors you may want your web developer to look into.

I don’t have any experience with AMP, so unfortunately I won’t be able to help. You may need to find another compatible accordion block plugin.

Not sure what’s happening here. The Accordion Item is showing in Widget screen for me on a fresh install of WordPress with no other plugins activated. Perhaps there is a conflict with your theme or another plugin.

Removing jQuery is something I’d like to do, but there are no current plans or a timeline for when I may get to it. I’ll have to rebuild the entire front end of the plugin and that will take a considerable amount of time. I’m just not sure when I’ll have the time, especially given this is a free plugin.

Are you able to share a link to the page?

Generally you can use this selector to target every child of the accordion content: .c-accordion__content > * {...}.

• This reply was modified 3 years, 5 months ago by philbuchanan.

Glad you got it working.

I’m not sure I fully understand the issue, but this definitely sounds out of scope for the intended use.

The only advice I can provide is that you may need to completely recreate the accordions. Basically the way the plugin works is after the initial page load, it sets up every accordion at the same time. Then it uses those created objects throughout the course of the user interactions. So if you completely replace the accordion item code, those objects disappear. This is the code in the plugin that sets up the accordions in the first place. You could try running something like this after you regenerate your accordions. Not 100% sure that will work though.

There is no function that returns the value of aria-expanded. It is set at line 176 and line 201.

What browsers are you supporting? That snippet uses some newer features of JavaScript, like const that won’t work in IE. I no longer support IE in any of my projects.

Maybe this will work better for you?

var triggers = document.querySelectorAll('.js-accordion-controller');

if (triggers && triggers.length > 0) {
	for (var i = 0; i < triggers.length; i += 1) {
		triggers[i].addEventListener('click', function(event) {
			var open = triggers[i].getAttribute('aria-expanded') === 'false';
			
			ga('send', 'event', {
				event: 'userInteraction',
				eventCategory: 'accordions',
				eventAction: open ? 'Accordion opened' : 'Accordion closed',
				eventLabel: triggers[i].innerText,
				eventValue: 1,
			});
		});
	}
}

I have zero experience with GTM itself, so I won’t be able to give any guidance there. The code I provided above will track the opening and closing though.