There is a purchase history page in that page we need to track the package currently we are going to track and purchased item so for using this drop down function we can check and track the packkage
<div class=“dropdown”>
<button class=“icon-button” >Track Package</button>
<div class=“dropdown-content”>
<a >ORDER DATE: 1/3/2024</a>
<a >AMOUNT: $561.85</a>
<a >STATUS: Billed</a>
<a >package:UZAS8945646546454 </a>
</div>
<script>
var buttons = document.querySelectorAll(‘.toggle-button’);
buttons.forEach(function(button) {
button.addEventListener(‘click’, function() {
buttons.forEach(function(btn) { btn.classList.remove(‘active’); });
this.classList.add(‘active’);
});
});
function showDropdownContent(event) {
var dropdownContent = event.currentTarget.nextElementSibling;
var isDisplayed = dropdownContent.style.display === ‘block’;
dropdownContent.style.display = isDisplayed ? ‘none’ : ‘block’;
}
document.querySelectorAll(‘.icon-button’).forEach(function(button) {
button.addEventListener(‘click’, showDropdownContent);
});
window.onclick = function(event) {
if (!event.target.matches(‘.icon-button’)) {
var dropdowns = document.getElementsByClassName(“dropdown-content”);
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style.display === ‘block’) {
openDropdown.style.display = ‘none’;
}
}
}
}
</script>