I am trying to toggle an aria tag between true
and false
when a button is clicked. I've tried several implementations which seem 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');
}
};
You can toggle the attribute by comparing its value with 'true'
.
x.ariaExpanded = x.ariaExpanded !== 'true';