jQuery: addEventListener 'click' isn't working on Chrome mobile (android)

Question

So I have this jQuery that is a basic accordion for an FAQ that's working (meaning it opens and closes as expected) everywhere except mobile chrome for Android:

const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  
  for (i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}
items.forEach(item => item.addEventListener('click', toggleAccordion));

Relevant HTML if you care:

<div class="accordion-item">
    <button id="accordion-button-1" aria-expanded="false">
        <span class="accordion-title">TITLE</span>
        <span class="icon" aria-hidden="true"></span>
    </button>
    <div class="accordion-content">
        <div class="acc-content-inner">
            <p class="acc-title">Title</p>
            <p>CONTENT</p>
        </div>
    </div>
</div>

As mentioned above, this works everywhere except Chrome for Mobile. Desktop, Samsung inte.net, Safari for iPhone, etc. They all open on touch, but chrome for mobile will not. I have tried switching from click to touch but either I did it wrong or that isn't the answer either.

There's also the possibility that I had it right and caching is screwing me, but I've deleted site data in between each edit, so that shouldn't be the problem.

Any ideas? Thanks in Advance!

Answer 1

Consider the following example.

Desktop: https://jsfiddle.net/Twisty/3kxbm8Lr/

Mobile: https://jsfiddle.net/Twisty/3kxbm8Lr/show

JavaScript

$(function() {
  var items = $("[id^='accordion-button-'");

  function toggleAccordion() {
    var itemToggle = $(this).attr('aria-expanded');
    items.attr("aria-expanded", 'false');
    $(this).attr('aria-expanded', itemToggle == 'true' ? 'false' : 'true');
  }

  items.click(toggleAccordion);
});

This uses more jQuery to select the elements and toggle the specific Attribute.