Use multiple dropdowns with the same Js function

Question

I have this column where I am supposed to display products

Right now the 1st dropdown only opens I want the user to able to open all of them in order to see all products

I am using the standard pure Js dropdown model

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Products1 or 2</button> <div id="myDropdown" class="dropdown-content"> <img src="images/E11A.png" class="bottles" /> <img src="images/E11A.png" class="bottles" /> </div> </div>

Answer 1

As I said in the comment you can't have multiple elements with the same name.

So what we could do given the html you have provided, is add this to onclick="myFunction()" and then do the following:

function myFunction(obj) {
  obj.nextElementSibling.classList.toggle("show");
}

Working Demo

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction(obj) { obj.nextElementSibling.classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 * { box-sizing: border-box; } body { background-color: grey; background-size: 100%; background-image: url('g50.png'); background-repeat: repeat; } html, body { height: 100%; margin: 0px; } .container { width: 100%; height: 1080px; display: flex; flex-direction: row; } .a { float: left; width: 250px; height: 100%; border: 1px solid blue; } .dropbtn { width: 98%; padding: 14px; background-color: #3498DB; color: white; padding: 14px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { width: 100%; display: inline-block; } .dropdown-content { width: 100%; height: 200px; overflow: scroll; display: none; background-color: #f1f1f1; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; }

 <div class="container"> <div class="a"> <div class="dropdown"> <button onclick="myFunction(this)" class="dropbtn">Dropdown</button> <div class="dropdown-content"> <img src="images/E11A.png" class="bottles" /> <img src="images/E11A.png" class="bottles" /> </div> <div class="dropdown"> <button onclick="myFunction(this)" class="dropbtn">Dropdown</button> <div class="dropdown-content"> <img src="images/E11A.png" class="bottles" /> <img src="images/E11A.png" class="bottles" /> </div> </div> </div> </div> </div>

Answer 2

First, you should not be using the same id twice try using a class instead, eg

<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div class="myDropdown dropdown-content">
  <img src="images/E11A.png" class="bottles"/>
  <img src="images/E11A.png" class="bottles"/>
</div>

Then in your javascript you can simply write the following to open both dropdowns

function myFunction() {
  document.querySelectorAll("myDropdown").forEach(el => el.classList.toggle("show"));
}