JavaScript keeps getting deleted from collection

Online Store and Theme Development
,
1

WHY DOES SHOPIFY KEEP DELETING MY CODE THEREFORE BREAKING MY PAGES. PLEASE HELP.

Here is the code it keeps deleting on SOME collection pages but not all:

<script>
document.querySelectorAll('.faq-question').forEach(button => {
  button.addEventListener('click', function() {
    const answer = this.nextElementSibling;
    const isHidden = answer.style.display === 'none' || answer.hasAttribute('hidden');

    if (isHidden) {
      answer.style.display = 'block'; // Show the answer
      answer.removeAttribute('hidden'); // Remove hidden attribute for compatibility
      this.querySelector('.faq-toggle').textContent = '-';
    } else {
      answer.style.display = 'none'; // Hide the answer
      answer.setAttribute('hidden', ''); // Add hidden attribute for compatibility
      this.querySelector('.faq-toggle').textContent = '+';
    }
  });
});
</script>

It also changes CSS from

.faq-answer {
display: none; /* Default state is hidden */
}

to

.faq-answer[hidden] {
display: none;
}

This severely affects SEO as the text becomes hidden. I cant keep going through my countless collection pages to ensure shopify did not delete any of the code. This is the third time that has happened now.

I reached out to support and they said there was nothing they could do as they are not equipped to handle code related questions… like WHAT.

I found one reddit thread that had the same issue and they resolved by getting in touch with shopify devs who admitted that there was an issue. But current shopify is not even doing that for me. No, nobody else is tinkering with the code.

Thank you all in advance!!!

2

Hi Jonrosen,

Just a couple questions to help us understand this issue:

  • Where exactly are you adding this code - as in which .liquid file and on which theme?
  • Can you share the store where this is happening?
  • Is the code being fully removed from the theme?