Add multiple classes with 1 button

March 29, 2023

I’m trying to add multiple classes to different items. I use this code:

    (function() {
    
      var button = document.querySelector('.menu-toggle');
      var box = document.querySelector('.menu-toggle2');
    
      button.addEventListener('click', function() {
    
        box.classList.toggle('active');
    
      });
    
    })();

   <button class="menu-toggle menu-toggle2"></button>
   <div class="menu-mob"></div>

after click:

<button class="menu-toggle menu-toggle2 active"></button>
<div class="menu-mob"></div>

And after click, I want to add activemenu class to mob-menu class too.

>Solution :

You can achieve this by selecting the menu-mob element and adding the activeMenu class to it inside the event listener. Here is the modified code:

(function() {
  var button = document.querySelector('.menu-toggle');
  var box = document.querySelector('.menu-toggle2');
  var menuMob = document.querySelector('.menu-mob');

  button.addEventListener('click', function() {
    box.classList.toggle('active');
    menuMob.classList.toggle('activeMenu');
  });
})();

This will add the activeMenu class to the menu-mob element when the button is clicked and the active class is added to the menu-toggle2 element.