Javascript - classList.toggle ("my-class") doesn't work because the main class is acquiring more than one

Question

Some Stackoverflow users have suggested using classList.toggle instead of the if and else conditions. So I'm trying to get it to work in my dropdown menu, but I don't understand why it's not working.

clicking the menu items in a completely random way, I find myself with div class="drop_container hide show", so the classes are not alternating as happens with the if and else conditions, but drop_container class is acquiring both hide and show. Is there something wrong ?

Edit: Thanks to the comments of all users I realized where I was wrong. The answers I have been given are all correct but none have been the solution for me. The one closest to my problem is the answer given by user @jeremy-denis

This is the solution I found: Originally I thought two classes were needed to animate the dropdown closing, in the end I realized that only one class is enough. So I added transition: max-height 0.3s ease; to the drop_container class.

This way I no longer have the initial problem with classList.toggle.

var dropdownBtn = document.querySelectorAll('.menu-btn');
//Add this for toggling dropdown
lastOpened = null;

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  menuContent.classList.toggle("show");
  
  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== menuContent)
      lastOpened.classList.remove("show");
      lastOpened = menuContent;
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.4s ease-in;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

<div class="menu-btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="menu-btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

</div>

Answer 1

I change your code a little bit.

var dropdownBtn = document.querySelectorAll('.menu-btn');
const drop_container = document.querySelectorAll('.drop_container');
//Add this for toggling dropdown
lastOpened = null;

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {      
  var menuContent = this.nextElementSibling;
  drop_container.forEach(b => b.classList.remove("show"));
  menuContent.classList.toggle("show");  
 
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
  cursor: pointer;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  max-height: 0; 
  display: none;
}

.show {
  display: block;
  max-height: 300px;
  transition: max-height 0.3s ease;  
}

.drop_container.hide {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

  <div class="menu-btn">One</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="menu-btn">Two</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>