when click on the one dropdown other dropdown will be close

Question

I created a dropdown list Javascript Toggle method. I face a problem a problem. The problem is - After clicking one dropdown, another dropdown still opens. I want others dropdown Will to be closed when I click on dropdown. This happen will be each dropdown. How do I do it?


   
       
   
   
     
     
     
  
  
     This Dropdown for Dropdown 1
  
  
     This Dropdown for dropdown 2

user_17716837 · Answer

here is the solution, all the code is commented.

div1 and div2 are hidden by default...
so with .toggle(): https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

I will add the class .show if there isn't
else I will remove the class from it.

so if the user clicks the first time on the button it will show the div1 then if he reclicked will hide, and this is looped (if he reclick)...

with classList.remove, we will hide the other element (always):

if clicked the button N1 will hide div2
if clicked the button N2 will hide div1

let div1 = document.getElementById("myDIV1");
let div2 = document.getElementById("myDIV2");

function myFunction1() {
  div1.classList.toggle("show");
  // remove the class for the second div
  div2.classList.remove("show");
}

function myFunction2() {
  div2.classList.toggle("show");
  // remove the class for the first div
  div1.classList.remove("show");
}

nav {
  width: 100%;
  height: 50px;
  background-color: #000;
}

button {
  height: 50px;
  margin-left: 10px;
  border: 0;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
}

div {
  display: none;
  width: 100%;
  height: 300px;
  position: absolute;
}

#myDIV1 {
  background-color: rgb(0, 0, 255);
  color: #fff;
}

#myDIV2 {
  background-color: rgb(0, 255, 0);
  color: #000;
}


/* this is the class we add and remove or toggle with javascript*/

.show {
  display: block;
}





  
  
  
  Document
  
  



  
  
    
    
  

  
  
    This Dropdown for Dropdown 1
  
  
  
    This Dropdown for dropdown 2

user_1772933 · Answer

You can make this a little easier to scale by using one function for all dropdown menus. This function closes all open drop-downs and toggles the target one.

function toggleDropDown(id) {
  document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}

function toggleDropDown(id) {
  document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}

nav {
  width: 100%;
  height: 50px;
  background-color: #000;
}

button {
  height: 50px;
  margin-left: 10px;
  border: 0;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  width: 100%;
  height: 300px;
  position: absolute;
}

#myDIV1 {
  background-color: rgb(0, 0, 255);
  color: #fff;
}

#myDIV2 {
  background-color: rgb(0, 255, 0);
  color: #000;
}

.show {
  display: block;
}


  
  


  This Dropdown for Dropdown 1


  This Dropdown for dropdown 2

Here is the same thing, but instead of hard-coding click events, it's better practice to use eventListeners, which get applied through the script after the page loads, like:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('nav button').forEach(button => {
    button.addEventListener('click', e => {
      let id = e.target.dataset.dropdown
      document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
    })
  })
})

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('nav button').forEach(button => {
    button.addEventListener('click', e => {
      let id = e.target.dataset.dropdown
      document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
    })
  })
})

nav {
  width: 100%;
  height: 50px;
  background-color: #000;
}

button {
  height: 50px;
  margin-left: 10px;
  border: 0;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  width: 100%;
  height: 300px;
  position: absolute;
}

#myDIV1 {
  background-color: rgb(0, 0, 255);
  color: #fff;
}

#myDIV2 {
  background-color: rgb(0, 255, 0);
  color: #000;
}

.show {
  display: block;
}


  
  


  This Dropdown for Dropdown 1


  This Dropdown for dropdown 2

when click on the one dropdown other dropdown will be close

2 Answers