0

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;
}
<div style="background-color:black">
  <div class="dropdown1">
    <button onclick="myFunction()" class="dropbtn1">REFRIGERANTS</button>
    <div id="myDropdown1" class="dropdown1-content" style="text-align:left;">
      <a href="#">Refrigerants</a><br>
      <a href="#">Lubricants</a><br>
      <a href="#">Treatments</a><br>
      <a href="#">R-134A Products</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button onclick="FunctionFluids()" class="dropbtn1">FLUIDS</button>
    <div id="myDropdown2" class="dropdown1-content" style="text-align:left">
      <a href="#">Brake Fluid</a><br>
      <a href="#">Automatic Transmission Fluid</a><br>
      <a href="#">Power Steering Fluid</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button onclick="FunctionAdditives()" class="dropbtn1">ADDITIVES</button>
    <div id="myDropdown3" class="dropdown1-content" style="text-align:left">
      <a href="#">Fuel Additives</a><br>
      <a href="#">Oil Additives</a>
    </div>
  </div>

  <div class="dropdown1">
    <button onclick="FunctionCleaners()" class="dropbtn1">CLEANERS</button>
    <div id="myDropdown4" class="dropdown1-content" style="text-align:left">
      <a href="#">Brake Parts Cleaner</a><br>
      <a href="#">Carb & Air Intake Cleaners</a><br>
      <a href="#">General Cleaners</a><br>
      <a href="#">Battery Cleaners</a><br>
    </div>
  </div>

  </font>
  </td>
  <td></td>
  <td align="left" width="38%">
    <font color="#ffffff">

      <div class="dropdown1">
        <button onclick="FunctionWinter()" class="dropbtn1">WINTER DRIVING</button>
        <div id="myDropdown5" class="dropdown1-content" text-align="left">
          <a href="#">Link 1</a><br>
          <a href="#">Link 2</a><br>
          <a href="#">Link 3</a><br>
        </div>
      </div>

      <div class="dropdown1">
        <button onclick="FunctionLubricants()" class="dropbtn1">LUBIRICANTS</button>
        <div id="myDropdown6" class="dropdown1-content" text-align="left">
          <a href="#">Link 1</a><br>
          <a href="#">Link 2</a><br>
          <a href="#">Link 3</a><br>
        </div>
      </div>

      <div class="dropdown1">
        <button onclick="FunctionOther()" class="dropbtn1">OTHER PRODUCTS</button>
        <div id="myDropdown7" class="dropdown1-content" text-align="left">
          <a href="#">Link 1</a><br>
          <a href="#">Link 2</a><br>
          <a href="#">Link 3</a><br>
        </div>
      </div>
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Steve
  • 3
  • 2
  • Does this code come from some blog with comment enabled or forum thread? Wasn't the author able to answer? – Stphane Feb 16 '18 at 15:22
  • Hi, can i maybe redo you js with jquery to make all of this work. I will happily explain how it all works – Gerardo BLANCO Feb 16 '18 at 15:24
  • No comment or forum, it was the only script I could figure out how to make it actually work but I'm stuck on getting the drop downs to disappear. I'm by no means a coder, I know just enough to piece a few things together... – Steve Feb 16 '18 at 15:41

2 Answers2

1

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;}
<div style="background-color:black">
<div class="dropdown">
  <button class="dropbtn">REFRIGERANTS</button>
  <div class="dropdown-content" style="text-align:left;">
    <a href="#">Refrigerants</a><br>
    <a href="#">Lubricants</a><br>
    <a href="#">Treatments</a><br>
    <a href="#">R-134A Products</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">FLUIDS</button>
  <div class="dropdown-content" style="text-align:left">
    <a href="#">Brake Fluid</a><br>
    <a href="#">Automatic Transmission Fluid</a><br>
    <a href="#">Power Steering Fluid</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">ADDITIVES</button>
  <div class="dropdown-content" style="text-align:left">
    <a href="#">Fuel Additives</a><br>
    <a href="#">Oil Additives</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">CLEANERS</button>
  <div class="dropdown-content" style="text-align:left">
    <a href="#">Brake Parts Cleaner</a><br>
    <a href="#">Carb & Air Intake Cleaners</a><br>
    <a href="#">General Cleaners</a><br>
    <a href="#">Battery Cleaners</a><br>
  </div>
</div>

</font></td>
            <td></td>
            <td align="left" width="38%"><font color="#ffffff">
                
<div class="dropdown">
  <button class="dropbtn">WINTER DRIVING</button>
  <div class="dropdown-content" text-align="left">
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">LUBIRICANTS</button>
  <div class="dropdown-content" text-align="left">
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">OTHER PRODUCTS</button>
  <div class="dropdown-content" text-align="left">
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
  </div>
</div>
</div>
James
  • 20,957
  • 5
  • 26
  • 41
  • While that works great in the snippet, it for some reason destroys the layout of my actual website and the drop downs don't work. I don't know why, probably something with the main script on the website conflicting, but the script I posted all worked as shown it just didn't close. Is there any way to make the original script just... close the drop down without wholesale changes? – Steve Feb 16 '18 at 16:07
  • I changed a bunch of class names. That's probably what happened - feel free to change them back just make sure you adjust the querySelector calls in the javascript. – James Feb 16 '18 at 16:16
  • One quick question, on this script, the drop down doesn't go away if I click outside of the drop down.... for example, you click on "Refrigerants" then you click the white space below, the menu still remains. I've modified the script to be mouseover rather than click, is there anyway to add to the code without wholesale changes so when your mouse exits the drop down, the drop down disappears? – Steve Feb 19 '18 at 22:48
  • Not totally sure what you're going for but I added a simple mouseleave handler on the menu divs that will hide them when the mouse leaves. – James Feb 19 '18 at 23:31
  • That's exactly it! Thanks a lot James! – Steve Feb 20 '18 at 14:09
0

You don't need to write separate function for every dropdown...

...use event.target to find the clicked element and toggle show class to it...

...to remove the previously added show class use for loop to find that element and remove that class

Note: I am adding the show class to the .dropbtn1 and then using css adjacent selector(+) to display:block to the next .dropdown1-content

Stack Snippet

window.onclick = function(event) {
  if (event.target.matches('.dropbtn1')) {
    var dropbuttons = document.getElementsByClassName("dropbtn1");
    for (var i = 0; i < dropbuttons.length; i++) {
      var openDropdown = dropbuttons[i];
      if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
    event.target.classList.toggle("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+.dropdown1-content {
  display: block;
}
<div style="background-color:black">
  <div class="dropdown1">
    <button class="dropbtn1">REFRIGERANTS</button>
    <div id="myDropdown1" class="dropdown1-content" style="text-align:left;">
      <a href="#">Refrigerants</a><br>
      <a href="#">Lubricants</a><br>
      <a href="#">Treatments</a><br>
      <a href="#">R-134A Products</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button class="dropbtn1">FLUIDS</button>
    <div id="myDropdown2" class="dropdown1-content" style="text-align:left">
      <a href="#">Brake Fluid</a><br>
      <a href="#">Automatic Transmission Fluid</a><br>
      <a href="#">Power Steering Fluid</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button class="dropbtn1">ADDITIVES</button>
    <div id="myDropdown3" class="dropdown1-content" style="text-align:left">
      <a href="#">Fuel Additives</a><br>
      <a href="#">Oil Additives</a>
    </div>
  </div>

  <div class="dropdown1">
    <button class="dropbtn1">CLEANERS</button>
    <div id="myDropdown4" class="dropdown1-content" style="text-align:left">
      <a href="#">Brake Parts Cleaner</a><br>
      <a href="#">Carb & Air Intake Cleaners</a><br>
      <a href="#">General Cleaners</a><br>
      <a href="#">Battery Cleaners</a><br>
    </div>
  </div>
  <div class="dropdown1">
    <button class="dropbtn1">WINTER DRIVING</button>
    <div id="myDropdown5" class="dropdown1-content" text-align="left">
      <a href="#">Link 1</a><br>
      <a href="#">Link 2</a><br>
      <a href="#">Link 3</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button class="dropbtn1">LUBIRICANTS</button>
    <div id="myDropdown6" class="dropdown1-content" text-align="left">
      <a href="#">Link 1</a><br>
      <a href="#">Link 2</a><br>
      <a href="#">Link 3</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button class="dropbtn1">OTHER PRODUCTS</button>
    <div id="myDropdown7" class="dropdown1-content" text-align="left">
      <a href="#">Link 1</a><br>
      <a href="#">Link 2</a><br>
      <a href="#">Link 3</a><br>
    </div>
  </div>
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57