Opening a different dropdown content on a different button - html

Question

I have this drop down which looks like this
Now when I click on Add Equipment everything works fine, but when I click on the Deployed Equipments the dropdown of the Add Equipment drops down.
Basically this is what happens when I click Deployed Equipments
Am I doing something wrong?
Here's my css:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
Here's my html:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Add Equipment</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Deployed Equipments</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Here's my JavaScript:
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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');
}
}
}
}
</script>

Answer 1

Both the divs have same id myDropdown. You can remove ids for the div and use the below code to access the dropdown using nextElementSibling of the clicked button. Hope this helps.
function myFunction() {
//Remove class 'show' for dropdown except the current one
[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
if (this.event.target.nextElementSibling !== el)
el.classList.remove("show");
});
//this.event.target refers to the button clicked. Get nextelement and toggle class 'show'
this.event.target.nextElementSibling.classList.toggle("show");
}
Example:
function myFunction() {
[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
if (this.event.target.nextElementSibling !== el)
el.classList.remove("show");
});
this.event.target.nextElementSibling.classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
el.classList.remove("show");
});
}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Add Equipment</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Deployed Equipments</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>

Answer 2

You should not use the same ID for 2 different elements on the same page. myDropdown appears to be on both.

Answer 3

Here you can find a solution made using jQuery:
$('.dropdown').click(function() {
$(this).find(".dropdown-content").toggleClass("show");
});
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Add Equipment</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Deployed Equipments</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>