javascript twitter-bootstrap drop-down-menu bootstrap-5 code-snippets

How to open dropdown from separate button in stackoverflow code snippet

Running code snippet using "Run code snippet" button and clicking "Open menu" button does nothing. It should open menu.

Menu is defined in other place in DOM and display is set to none.

How to run this code snippet from this page?

function xonclick() {
  const dropdownButton = document.getElementById('settingsDropDown');
  const dropdownMenu = document.getElementById('seadedMenyy');
  const clickedButton = document.getElementById('grid_muu');

  // Get current dropdown instance
  const existingDropdown = bootstrap.Dropdown.getInstance(dropdownButton);

  // Toggle behavior
  if (existingDropdown) {
    existingDropdown.dispose();
    dropdownMenu.classList.remove('show');
    return;
  }

  // Get precise button position
  const rect = clickedButton.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // Set position with scroll offset
  dropdownMenu.style.position = 'absolute';
  dropdownMenu.style.left = `${rect.left}px`;
  dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;

  // Create and show new dropdown instance
  const dropdown = new bootstrap.Dropdown(dropdownButton);
  dropdown.show();
}

.dropdown-menu {
  margin: 0 !important;
  padding: 0.5rem 0;
  transform: none !important;
}

#settingsDropDown {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="dropdown">
    <button id="settingsDropDown" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  Dropdown button
</button>
    <ul class="dropdown-menu" id="seadedMenyy">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

  <table>
    <tr>
      <td>Some text</td>
      <td><button id="grid_muu" onclick="xonclick()">Open menu</button></td>
    </tr>
  </table>
</body>

Solution

Hide the menu and toggle it with the button

const dropdownButton = document.getElementById('settingsDropDown');
const dropdownMenu = document.getElementById('seadedMenyy');
const clickedButton = document.getElementById('grid_muu');

clickedButton.addEventListener('click', () => {

  // Close the menu if already open
  const isMenuOpen = dropdownMenu.style.display === 'block';
  if (isMenuOpen) {
    dropdownMenu.style.display = 'none';
    dropdownMenu.classList.remove('show');
    return;
  }

  // Get precise button position
  const rect = clickedButton.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // Set position with scroll offset
  dropdownMenu.style.position = 'absolute';
  dropdownMenu.style.left = `${rect.left}px`;
  dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;

  // Show the dropdown
  dropdownMenu.style.display = 'block';
  dropdownMenu.classList.add('show');
});
document.addEventListener('click', (event) => {
  // Check if the click happened outside the menu and button
  if (!dropdownMenu.contains(event.target) && !clickedButton.contains(event.target)) {
    dropdownMenu.style.display = 'none';
    dropdownMenu.classList.remove('show');
  }
});
// Delegate click event to the dropdown menu for menu items
dropdownMenu.addEventListener('click', (event) => {
  if (event.target.matches('.dropdown-item')) {
    dropdownMenu.style.display = 'none';
    dropdownMenu.classList.remove('show');
  }
});

.dropdown-menu {
  margin: 0 !important;
  padding: 0.5rem 0;
  transform: none !important;
  display: none;
  /* Hide by default */
}

#settingsDropDown {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<div class="dropdown">
  <button id="settingsDropDown" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
  <ul class="dropdown-menu" id="seadedMenyy">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

<table>
  <tr>
    <td>Some text</td>
    <td><button id="grid_muu">Open menu</button></td>
  </tr>
</table>