I have developed a dropdown feature that requires users to click on specific text in order to reveal more content below. Here is the code for this functionality:
.dropbtn {
cursor: pointer;
font-weight: bold;
}
.dropdown03 {
position: relative;
display: inline-block;
text-align: left;
width: 100%;
}
.dropdown-content03 {
display: none;
position: relative;
width: 100%;
overflow: auto;
z-index: 1;
}
.show {display: block;}
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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-content03");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div class="dropdown03">
<button onclick="myFunction()" class="dropbtn">Dropdown Button Text</button>
<div id="myDropdown" class="dropdown-content03">
Dropdown Button Text
</div>
</div>
This code works perfectly on my website. However, I encountered an issue when trying to add another dropdown using the same code. The first dropdown displays correctly, but subsequent dropdowns do not work as intended - they only show the content of the first dropdown. (I hope this explanation makes sense)
Is there a way to ensure that each dropdown shows its own content when clicked? Do I need to create unique tags for each individual dropdown?