when click on the one dropdown other dropdown will be close-CodePudding

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?

<html>
   <head>
       <style>
     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;
     }
     .show{
     display:block;
     }
  </style>
   </head>
   <body>
     <nav>
     <button onclick="myFunction1()">Dropdown1</button>
     <button onclick="myFunction2()">Dropdown2</button>
  </nav>
  <div id="myDIV1">
     This Dropdown for Dropdown 1
  </div>
  <div id="myDIV2">
     This Dropdown for dropdown 2
  </div>
  <script>
     function myFunction1() {
        var element = document.getElementById("myDIV1");
        element.classList.toggle("show");
     }
     function myFunction2() {
        var element = document.getElementById("myDIV2");
        element.classList.toggle("show");
     }
  </script>
   </body>
</html>

CodePudding user response：

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

<nav>
  <button onclick="toggleDropDown('myDIV1')">Dropdown1</button>
  <button onclick="toggleDropDown('myDIV2')">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
  This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
  This Dropdown for dropdown 2
</div>

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

<nav>
  <button data-dropdown="myDIV1">Dropdown1</button>
  <button data-dropdown="myDIV2">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
  This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
  This Dropdown for dropdown 2
</div>

CodePudding user response：

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>

<body>
  <!-- navbar -->
  <nav>
    <button onclick="myFunction1()">Dropdown1</button>
    <button onclick="myFunction2()">Dropdown2</button>
  </nav>

  <!-- 1 -->
  <div id="myDIV1">
    This Dropdown for Dropdown 1
  </div>
  <!-- 2 -->
  <div id="myDIV2">
    This Dropdown for dropdown 2
  </div>
</body>

</html>