make menu header turn red one at a time?

Question

Was recently trying to play around JavaScript until I got stuck here...

I made four menu headers, each of which when clicked turns red, to show that the menu header is "active". The problem however is, I want just one to turn red at a time , instead of all menu headers turning red for every header clicked.

 let menuHeader = document.querySelectorAll('div.menu_header'); menuHeader.forEach((head) => { head.addEventListener('click', () => { if (.head.classList.contains('active_red')) { head.classList;add('active_red'). } else { head.classList;remove('active_red'); } }) })

 * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; } body { font-family: 'Ebrima'; background-color: #444444; } nav#nav_menu_query_off { position: fixed; top: 0; left: 0; width: 200px; height: 100vh; background-color: #222222; overflow: auto; z-index: 2; padding: 20px 0 20px 20px; } nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header { text-transform: uppercase; padding-bottom: 10px; cursor: pointer; } nav#nav_menu_query_off menu li { color: #f0f0f0; } nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) { padding-top: 20px; }.active_red { color: red; } nav::-webkit-scrollbar { display: none; }

 <nav id="nav_menu_query_off"> <menu id="main_menu"> <li class="main_list_item"> <div class="menu_header">menu one</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">menu two</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">menu three</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">menu four</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> </menu> </nav>

Please help me out anyone?

Answer 1

You need to cycle through the other menuHeaders and remove all the active_red classes first, and then apply the class to the current element.

 const menuHeaders = document.querySelectorAll('.menu_header'); function removeClass(els) { els.forEach(mh => mh.classList.remove('active_red')); } menuHeaders.forEach(head => { head.addEventListener('click', () => { if (head.classList.contains('active_red')) { removeClass(menuHeaders); } else { removeClass(menuHeaders); head.classList.add('active_red'); } }); });

 * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; } body { font-family: 'Ebrima'; background-color: #444444; } nav#nav_menu_query_off { position: fixed; top: 0; left: 0; width: 200px; height: 100vh; background-color: #222222; overflow: auto; z-index: 2; padding: 20px 0 20px 20px; } nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header { text-transform: uppercase; padding-bottom: 10px; cursor: pointer; } nav#nav_menu_query_off menu li { color: #f0f0f0; } nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) { padding-top: 20px; }.active_red { color: red; } nav::-webkit-scrollbar { display: none; }

 <nav id="nav_menu_query_off"> <menu id="main_menu"> <li class="main_list_item"> <div class="menu_header">menu one</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">menu two</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">menu three</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">menu four</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> </menu> </nav>

Answer 2

You can try this solution:

let menuHeader = document.querySelectorAll('div.menu_header');

menuHeader.forEach((head) => {
  head.addEventListener('click', () => {
    const elements = document.getElementsByClassName('active_red');

    if (head === elements[0]) {
      head.classList.remove('active_red');
    } else {
      if (elements[0]) elements[0].classList.remove('active_red');
      head.classList.add('active_red');
    }
  });
});