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');
  }
};

ARIA attributes are no different than other HTML attributes and can be changed with setAttribute() as @connexo recommended. — slugolicious, Nov 09 '21 at 00:27
On StackOverflow, you are required to manage your questions' lifecycle. That means, that if you get answers, and they solve your problem, pick the answer that answers it best. If not, comment on the answers given and explain why these do not help you solve your problem. — connexo, Nov 09 '21 at 21:22

connexo · Answer 1 · 2021-11-09T04:56:00.870

4

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'
    );
  }
};

edited Nov 09 '21 at 04:56

answered Nov 08 '21 at 20:02

connexo

53,704
14
91
128

This should be marked as the right answer! – Victor Eke Apr 10 '23 at 21:25

score 4 · Answer 2 · answered Jun 08 '22 at 09:30

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')}`
    );

Toggle aria-expanded between true and false with javascript

2 Answers2