I want to activate a dropdown menu from another button, but it only activates it once or won't activate it if it's already activated from the actual dropdown, here's the code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul id="dropdown_menu" class="dropdown-menu">
<li><a class="dropdown-item">link1</a></li>
<li><a class="dropdown-item">link2</a></li>
</ul>
</div>
<button style="margin-top: 250px" onclick="enabledropdown()">Click me</button>
</body>
</html>
script:
function enabledropdown() {
document.getElementById('navbarDropdownMenuLink').setAttribute('class', 'nav-link dropdown-toggle show')
document.getElementById('navbarDropdownMenuLink').setAttribute('aria-expanded', 'true')
document.getElementById('dropdown_menu').setAttribute('class', 'dropdown-menu show')
document.getElementById('dropdown_menu').setAttribute('data-popper-placement', 'bottom-start')
}
adding a second function that deactivates the dropdown (by changing the attributes back to original) seems to solve that problem if you keep deactivating and activating the dropdown from the button, but once the actual dropdown is clicked it stops working again.
(i already tried
document.getElementById('navbarDropdownMenuLink').click()
instead of changing attributes one by one, but it doesn't work)