make menu header turn red one at a time?

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

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>