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>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>First, you should not be using the same id twice try using a class instead, e.g.
<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"));
}