Toggle button menu

Following example shows how to create toggle button with Tailwind CSS and Javascript inlined in HTML:

<nav>
  <ul>
    <li>
      <button 
        type="button"
        aria-expanded="false"
        class="group peer flex w-full justify-between rounded px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-950/50" 
        onclick="(function toggle(button) { button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')})(this)">
        <span>Toggle button</span>
        <svg 
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px" 
            class="fill-natural-500 transition ease-in-out group-aria-expanded:rotate-90 dark:fill-gray-400">
          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
        </svg>
      </button>
      <ul class="hidden peer-aria-expanded:block">
        <li><a href="#" class="flex w-full rounded px-2.5 py-1.5 hover:bg-gray-200 dark:hover:bg-gray-950/50">Link one</a></li>
        <li><a href="#" class="flex w-full rounded px-2.5 py-1.5 hover:bg-gray-200 dark:hover:bg-gray-950/50">Link two</a></li>
      </ul>
    </li>
  </ul>
</nav>

https://play.tailwindcss.com/HxHvapkYPw

or you can extract toggle button javascript to separate file:

document.querySelectorAll('button[aria-expanded]').forEach(button => {
  button.addEventListener('click', () => {
    button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
  });
});