Kevin Powell - Community•2y ago

is there a way to toggle multiple CSS classes in one statement?

i have a class called active that i would like to add to all my side-bar_menu-text classes on the click of a button, but it only adds this class to the first element. my code: const collapseMenuBtn = document.getElementById('collapse-menu'); const sideBarMenuText = document.querySelectorAll('.side-bar_menu-text'); collapseMenu.addEventListener('click', () => { console.log('collapse menu') sideBarMenuText.classList.toggle('active'); });

4 Replies

Jochem•2y ago

you have to loop over the list, no way to do it all in one go

winniffy•2y ago

if i loop over the list, doesn't it loop over the list and adds the style to the last element?

Jochem•2y ago

collapseMenu.addEventListener('click', () => {
    console.log('collapse menu')
    sideBarMenuText.forEach(elem => elem.classList.toggle('active'));
});

collapseMenu.addEventListener('click', () => {
    console.log('collapse menu')
    sideBarMenuText.forEach(elem => elem.classList.toggle('active'));
});

nope in fact, what you pasted shouldn't even work at all, you should be getting something about classList not being a property of Array

winniffy•2y ago

it does work tho this worked. incredible. thank you

Gaming

Programming

is there a way to toggle multiple CSS classes in one statement?