Toggle aria-expanded between true and false with javascript

Question

I am trying to toggle an aria tag between true and false when a button is clicked. I've tried several implementations which seems to do absolutely nothing. Below is what I am currently using which successfully toggles the class. How can I extend this to toggle the aria-expanded value between true and false? Be easy on me, I am transitioning from jQuery to ES6.

const theTrigger = document.getElementById('mobile-form-control');
const theForm = document.querySelectorAll('.l-header__mobile-form');

theTrigger.onclick = function () {
  for (const x of theForm) {
    x.classList.toggle('show');
  }
};

Answer 1

Assuming x in your for-loop is the element you want to toggle the aria-expanded attribute on:

theTrigger.onclick = function () {
  for (const x of theForm) {
    x.classList.toggle('show');
    x.setAttribute(
      'aria-expanded', 
      x.getAttribute('aria-expanded') === 'true' 
        ? 'false' 
        : 'true'
    );
  }
};

Answer 2

It would be much easier with a simple toggle:

    x.ariaExpanded = !x.ariaExpanded;

But weirdly, Firefox doesn't support direct boolean access to the DOM property! 🤯 https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded#browser_compatibility

So I ended up with something like this:

    x.setAttribute(
      'aria-expanded', 
      `${!(x.getAttribute('aria-expanded') === 'true')}`
    );