Untitled fiddle

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="relative">
  Action menu 1:
    <button data-dropdown-id="action-menu" class="dropdown-button cursor-pointer bg-eb-dark border border-b border-gray-800 p-4 rounded-lg backdrop-blur-sm shadow-md text-gray-500 relative flex h-11 w-11 items-center justify-center">
        <i class="fa-solid fa-ellipsis-vertical"></i>
    </button>

    <!-- Dropdown menu -->
    <div data-id="action-menu" data-conflicts="action-menu2" class="z-10 animate__animated animate__faster hidden border border-b border-gray-800 rounded-base shadow-lg mt-[17px]">
        <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton">
            <li>
                <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Dashboard</a>
            </li>
            <li>
                <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Settings</a>
            </li>
            <li>
                <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Earnings</a>
            </li>
            <li>
                <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Sign out</a>
            </li>
        </ul>
    </div>
</div>

<div class="relative">
  Action menu 2:
    <button data-dropdown-id="action-menu2" class="dropdown-button cursor-pointer bg-eb-dark border border-b border-gray-800 p-4 rounded-lg backdrop-blur-sm shadow-md text-gray-500 relative flex h-11 w-11 items-center justify-center">
...

JavaScript

/**
 * Manage drop down menus
 */
function dropdown_menus() {
  // ///// ///// ///// ///// /////
  // data-dropdown-id="notification-items" class="dropdown-button"
  const dropdown_buttons = document.querySelectorAll('.dropdown-button');

  dropdown_buttons.forEach((dropdown_button) => {
    // dropdown-button

    // If someone clicks a button
    dropdown_button.addEventListener('click', () => {
      const dropdownId = dropdown_button.getAttribute('data-dropdown-id');
      // action-menu1
      // action-menu2

      //const menu = document.getElementById(dropdownId);
      const menu = document.querySelector('[data-id="' + dropdownId + '"]');
      const conflicts = document.querySelector('[data-id="' + menu.getAttribute('data-conflicts') + '"]');

      if (menu) {

        conflicts.classList.add('hidden')

        if (menu.classList.contains('animate__fadeInUp')) {
          menu.classList.add('animate__fadeOutDown');
          menu.classList.remove('animate__fadeInUp');
          // menu.classList.add('hidden');
        } else {
          menu.classList.remove('hidden');
          menu.classList.add('animate__fadeInUp');
          menu.classList.remove('animate__fadeOutDown');
        }
      }
    });
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', dropdown_menus);
} else {
  dropdown_menus(); // DOM already ready
}