Dropdown Menu Closing on Click

Question

I'm creating drop downs with a code that I found on the web.

Problem is, when I click on one menu that opens, then I click on the next menu, the first menu remains open...

I managed to get just about everything working great on drop downs, links, sizing and colors...

...but it won't close as I click over to the other drop down.

Any and all help would be appreciated!

function myFunction() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown1-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionFluids() {
  document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns = document.getElementsByClassName("dropdown2-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionAdditives() {
  document.getElementById("myDropdown3").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns = document.getElementsByClassName("dropdown3-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionCleaners() {
  document.getElementById("myDropdown4").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns = document.getElementsByClassName("dropdown4-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionWinter() {
  document.getElementById("myDropdown5").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns = document.getElementsByClassName("dropdown5-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionLubricants() {
  document.getElementById("myDropdown6").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns = document.getElementsByClassName("dropdown6-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionOther() {
  document.getElementById("myDropdown7").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns = document.getElementsByClassName("dropdown7-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionNone() {
  document.getElementById("myDropdown7").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown6-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn1 {
  background-color: transparent;
  color: white;
  padding: 7px 10px 7px 10px;
  font-size: 13px;
  font-weight: bold;
  font-family: "Arial Narrow", Arial, sans-serif;
  border: none;
  cursor: pointer;
}

.dropbtn1:hover,
.dropbtn1:focus {
  background-color: #383838;
}

.dropdown1 {
  position: relative;
  display: inline-block;
}

.dropdown1-content {
  display: none;
  position: absolute;
  background-color: #eff0f2;
  font-size: 13px;
  font-weight: bold;
  line-height: 2.2;
  width: 200px;
  padding: 23px 10px 10px 10px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: -501;
  border-bottom: 3px solid red;
}

.dropdown1-content a {
  color: black;
  text-align: left;
  font-size: 12px;
  padding: 6px 6px 6px 6px;
  text-decoration: none;
}

.dropdown1-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}


  
    
    
      Refrigerants

      Lubricants

      Treatments

      R-134A Products

    
  

  
    
    
      Brake Fluid

      Automatic Transmission Fluid

      Power Steering Fluid

    
  

  
    
    
      Fuel Additives

      Oil Additives
    
  

  
    
    
      Brake Parts Cleaner

      Carb & Air Intake Cleaners

      General Cleaners

      Battery Cleaners

    
  

  
  
  
  
    

      
        
        
          Link 1

          Link 2

          Link 3

        
      

      
        
        
          Link 1

          Link 2

          Link 3

        
      

      
        
        
          Link 1

          Link 2

          Link 3

James · Accepted Answer

Here's a technique that doesn't need ids, and doesn't need 4 functions that all do the same thing. It uses classes to assign handlers and find elements based on what button was clicked.

// set up the event handlers
var buttons = document.querySelectorAll("button.dropbtn");
for (var i=0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", showDiv);
}

// set up the mouseout handlers
var contentDivs = document.querySelectorAll(".dropdown-content");
for (var i=0; i < contentDivs.length; i++) {
  contentDivs[i].addEventListener("mouseleave", hideDiv);
}


function showDiv(e) {
  // remove "show" class from previously shown menu, if it exists.  
  var prev = document.querySelector(".dropdown-content.show");
  if (prev) prev.classList.remove("show");
  
  // add "show" class to new clicked menu, unless the clicked menu was already open in which case close it
  var dropdownContent = this.parentNode.querySelector(".dropdown-content");
  if (dropdownContent == prev) return;
  dropdownContent.classList.add("show");
}

function hideDiv() {
  this.classList.remove("show");
}

.dropbtn{
    background-color: transparent;
    color: white;
    padding: 7px 10px 7px 10px;
    font-size: 13px;
    font-weight:bold;
    font-family: "Arial Narrow", Arial, sans-serif;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus{background-color: #383838;}

.dropdown{position: relative;display: inline-block;}

.dropdown-content{
    display: none;
    position: absolute;
    background-color: #eff0f2;
    font-size: 13px;
    font-weight:bold;
    line-height:2.2;
    width: 200px;
    padding: 23px 10px 10px 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: -501;
    border-bottom: 3px solid red;
}

.dropdown-content a{
    color: black;
    text-align: left;
    font-size: 12px;
    padding: 6px 6px 6px 6px;
    text-decoration: none;
}


.dropdown-content a:hover{background-color: #ddd}

.show {display:block;}



  
  
    Refrigerants

    Lubricants

    Treatments

    R-134A Products

  



  
  
    Brake Fluid

    Automatic Transmission Fluid

    Power Steering Fluid

  



  
  
    Fuel Additives

    Oil Additives
  



  
  
    Brake Parts Cleaner

    Carb & Air Intake Cleaners

    General Cleaners

    Battery Cleaners

  



            
            
                

  
  
    Link 1

    Link 2

    Link 3

  



  
  
    Link 1

    Link 2

    Link 3

  



  
  
    Link 1

    Link 2

    Link 3

Dropdown Menu Closing on Click

Answers (2)

Related Questions