Tengo esta columna donde se supone que debo mostrar productos.
En este momento, solo se abre el primer menú desplegable. Quiero que el usuario pueda abrirlos todos para ver todos los productos.
Estoy usando el modelo desplegable Js puro estándar
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>Como dije en el comentario, no puede tener varios elementos con el mismo nombre.
Entonces, lo que podríamos hacer dado el html que ha proporcionado, es agregar this a onclick="myFunction()" y luego hacer lo siguiente:
function myFunction(obj) { obj.nextElementSibling.classList.toggle("show"); }Demostración de trabajo
/* 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>Primero, no debe usar la misma identificación dos veces, intente usar una clase en su lugar, por ejemplo
<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>Luego, en su javascript, simplemente puede escribir lo siguiente para abrir ambos menús desplegables
function myFunction() { document.querySelectorAll("myDropdown").forEach(el => el.classList.toggle("show")); }