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');
}
};
You mean something like that?
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('hide'); } };
.hide { display: none; }
<button id="mobile-form-control">klick</button> <div class="l-header__mobile-form hide" >1</div> <div class="l-header__mobile-form hide">2</div> <div class="l-header__mobile-form hide">3</div>
x.ariaExpanded = x.ariaExpanded !== 'true';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.