Accordion blocks are no longer responding

Hello!

I've just gone live on a website to find the accordion blocks that were working perfectly before have now stopping working.
Typical...! 

I don't suppose anyone else has the same issue? I don't think it's anything to do with going live, but client is keen for this to be fixed asap.

Thank you!

Can you share the website URL and page?

1 hour ago, Ziggy said:

Can you share the website URL and page?

Apologies, I added the website URL in the form but it hasn't shown!
It's www.porta-bowl.co.uk, home page right at the bottom.

I also have another on the product page (only one product) - both have stopped working.

Thanks, do you have any code or CSS on the website?

@lauren-offpaper The issue is the JavaScript code that you have running that superscripts the registration mark is removing the JavaScript events attached to the accordion. Replace the JavaScript that superscripts the registration mark with the new JS below:

New JavaScript

/* superscripting all ® which aren't already */
window.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("p, a, h1, h2, h3, h4, h5, h6, label").forEach(function (el) {
    const isAccordionItem = el.closest('.accordion-item__title-wrapper') !== null;
    const accordionTitleEl = isAccordionItem && el.querySelector('.accordion-item__title');
    if (accordionTitleEl) {
      accordionTitleEl.innerHTML = accordionTitleEl.innerHTML.replace(/®(?!\<\/sup)/g, "<sup>®</sup>");
    } else {
      el.innerHTML = el.innerHTML.replace(/®(?!\<\/sup)/g, "<sup>®</sup>");
    }
  })
});

Screenshot of the old/current JS:

14 hours ago, jpeter said:

@lauren-offpaper The issue is the JavaScript code that you have running that superscripts the registration mark is removing the JavaScript events attached to the accordion. Replace the JavaScript that superscripts the registration mark with the new JS below:

New JavaScript

/* superscripting all ® which aren't already */
window.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("p, a, h1, h2, h3, h4, h5, h6, label").forEach(function (el) {
    const isAccordionItem = el.closest('.accordion-item__title-wrapper') !== null;
    const accordionTitleEl = isAccordionItem && el.querySelector('.accordion-item__title');
    if (accordionTitleEl) {
      accordionTitleEl.innerHTML = accordionTitleEl.innerHTML.replace(/®(?!\<\/sup)/g, "<sup>®</sup>");
    } else {
      el.innerHTML = el.innerHTML.replace(/®(?!\<\/sup)/g, "<sup>®</sup>");
    }
  })
});

Screenshot of the old/current JS:

Incredible, thank you - solved instantly!
I didn't think superscript would affect it so much haha, thanks so much!

I originally had the code injection in the footer but it's now viewable on the page.

I've moved it to the header instead but it's briefly visible when you load the page - is there any way to hide this?

I've taken out the code, it seems to be messing with my custom font (from Adobe Typekit) - I've removed it but the font hasn't gone back to the way it was and I have a random serif font on my buttons?

14 hours ago, jpeter said:

@lauren-offpaper Did you place the JavaScript code between <script> tags? That may be why you were seeing the code rendering on the page. For example:

<script>
  // Add JS code here
</script>

 

Perfect, thanks so much!