search

excid3 / tailwindcss-stimulus-components

A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.
https://excid3.github.io/tailwindcss-stimulus-components/
MIT License
1.39k stars 140 forks source link

Toggleables can't toggle independently? #249

Closed matt17r closed 2 months ago

matt17r commented 2 months ago

I'm trying to use Toggle to switch which icon is hidden in a button when the button is clicked. Even if I start with Icon A visible and Icon B hidden, toggle synchronises them on first run.

Does Toggle support toggling two items with opposing values? If not, is this a valid use case that's worth adding support for?

<div data-controller="toggle" class="-mr-2 flex md:hidden">
  <button data-action="click->toggle#toggle touch->toggle#toggle" type="button" class="relative inline-flex items-center justify-center rounded-md bg-blue-900 p-2 text-blue-50">
    <!-- Hamburger icon, starts visible -->
    <svg data-toggle-target="toggleable" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
    <!-- Close (x) icon, starts hidden -->
    <svg data-toggle-target="toggleable" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>