How to fix FAQ accordion on collection page?

Technical Q&A
1

We’re experiencing an issue on the Collection Page. At the bottom, we’ve added an FAQ accordion. While it works initially, it can no longer be opened after a filter has been applied.

Does anyone have a solution for this?

1 Like
2

Hey @Trekvogel

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3
1 Like
4

The FAQ section isn’t coded properly and it ends up interfering with the filters. I would need to have a look at the backend to help you in that and for that I would require the collaborator access of your store so feel free to share it with me in my private messages and I’ll get that sorted out for you.

Cheers,
Moeed

5

It is a classic, your filter is replacing the content when loading the products/section content and your event listeners are gone because your elements are replaced.

1 Like
6

Try this – in your accordion code there is this part:

  // Optional: falls Shopify AJAX Filter nutzt
  document.addEventListener('ajax:complete', () => { 
    initFAQAccordions(); 
  });

This would not work because theme does not fire any “ajax:complete” events.

Replace it with the code below.

document.addEventListener('facet:update', e => {
 document.addEventListener('theme:loading:end', e => { 
    setTimeout(initFAQAccordions, 300);
  }, { once: true } )
});

Theme fires “facet:update”, but it starts the actual collection section update, so we need to listen to another event for loading to complete…

However, I’d rather move the accordion into a separate section so it’s not rewritten with each facet change. Then this edit would not be needed.

7

Yeah, that’s a pretty common issue with Shopify collection pages when filters trigger AJAX reloads. After you apply a filter, the page content inside the product grid—and sometimes parts of the DOM around it—get replaced dynamically. That means your FAQ accordion’s event listeners are lost because the JavaScript doesn’t reinitialize after the reload.

To fix it, you can reattach your accordion script after each filter update. If you’re using Shopify’s native filters (like facet.js), listen for the shopify:section:load or facet:updated event and re-run the accordion initialization code there. For example:

document.addEventListener('shopify:section:load', initFAQAccordion);
document.addEventListener('facet:updated', initFAQAccordion);

function initFAQAccordion() {
  const accordions = document.querySelectorAll('.faq-accordion-item');
  accordions.forEach(item => {
    item.addEventListener('click', () => {
      item.classList.toggle('active');
    });
  });
}

That way, the accordion stays functional even after filters reload the content. If you’re using a theme with jQuery, you can also trigger it inside the AJAX success callback instead.

In short—your script works fine, it just needs to be reinitialized whenever Shopify replaces part of the page.

8

There’s a code/archiecture smell here.
If you have a FAQ tied to filtering something has likely gone wrong way before javascript is even involved.

If the FAQ is meant to be contextual then it should probably be using the section rendering api with the filter update then yes re-initing can make sense for js dependent UI’s.

Having to reinit an accordion system when there is NO new SPECIFIC context inside the FAQ is the problem that should be addressed, everything else is a band-aid and performance problem.

9

wow wow wow wow!!!superb, i was so so worried about this issue and voila my issue is now resolved.