Javascript - classList.toggle ("my-class") doesn't work because the main class is acq-CodePudding

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 , 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 >

<div >One</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

<div >Two</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

</div>

CodePudding user response：

you just have to toggle the class show to be able to hide and show different element

  menuContent.classList.toggle("show");

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;
}

.drop_container.show {
  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 >

  <div >One</div>
  <div >
    <a  href="#">Contact Us</a>
    <a  href="#">Visit Us</a>
  </div>

  <div >Two</div>
  <div >
    <a  href="#">Contact Us</a>
    <a  href="#">Visit Us</a>
  </div>

</div>

CodePudding user response：

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 >

  <div >One</div>
  <div >
    <a  href="#">Contact Us</a>
    <a  href="#">Visit Us</a>
  </div>

  <div >Two</div>
  <div >
    <a  href="#">Contact Us</a>
    <a  href="#">Visit Us</a>
  </div>

</div>