How to toggle two sets of arbitrary tailwind classes for transitions?

Your example seems to be empty - was it a copy/paste that didn’t get into the post?

Also, have you seen JS.transition? It supports tailwind classes Phoenix.LiveView.JS — Phoenix LiveView v1.2.5

The post originally tried to use single backquotes on separate lines to quote a whole block of code, which resulted in the code not getting quoted. I’ve replaced them with triple-backquotes ``` which work as the author intended.

LiveBeats uses tailwind and toggles menu and such just fine from TailwindUI. Have you looked there?:

check the <.dropdown> in core components and the show_dropdown and hide_dropdown functions:
https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/components/core_components.ex#L318-L336

Thanks, it was in the mod queue so I didn’t get a chance to review for formatting beforehand

Hey Chris, thanks a bunch for the reply (and for your work)!

I took a brief look, it seems to me like your approach to this problem is as follows:

1. Create a button that shows the mobile menu (sidebar) on click.

<button
      type="button"
      id="show-mobile-sidebar"
      aria-expanded="false"
      aria-controls="mobile-sidebar"
      class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 lg:hidden"
      phx-click={show_mobile_sidebar()}
    >
      <span class="sr-only">Open sidebar</span>
      <svg
        class="h-6 w-6"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 6h16M4 12h8m-8 6h16"
        >
        </path>
      </svg>
    </button>

2. Inside the mobile menu, have a nested component that is capable of hiding the mobile sidebar:

<div
  id="mobile-sidebar-container"
  class="fixed inset-0 flex z-40 lg:hidden"
  aria-modal="true"
  style="display: none;"
  role="region"
>
  <div class="fixed inset-0 bg-gray-600 bg-opacity-75" phx-click={hide_mobile_sidebar()}></div>

  <div
    id="mobile-sidebar"
    class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white hidden min-h-screen"
  >
  ...

3. Implement the “show” method called by the button in #1 to hide itself.

def show_mobile_sidebar(js \\ %JS{}) do
    js
    |> JS.show(to: "#mobile-sidebar-container", transition: "fade-in")
    |> JS.show(
      to: "#mobile-sidebar",
      display: "flex",
      time: 300,
      transition:
        {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
    )
    |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out")
    |> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []})
  end

This is clever and seems like a viable approach, but where I think it gets a bit ugly is when you have the desire for a single button to control both the “show” and “hide” behavior of a component. In that case, you’d need to end up having two buttons with most things duplicated, and two methods - something like this:

<button id="show-menu-button" class="block <%= @duplicated_classes %>" phx-click={show_menu("#menu")}>Show Menu</button>
<button id="hide-menu-button" class="hidden <%= @duplicated_classes %>" phx-click={hide_menu("#menu")}>Hide Menu</button>

def show_menu(menu) do
  hide_button("#show-menu-button")
  show_button("#hide-menu-button")
  JS.show(to: menu)
  # transitions omitted for brevity
end 

def hide_menu(menu) do
  hide_button("#hide-menu-button")
  show_button("#show-menu-button")
  JS.hide(to:menu)
  # transitions omitted
end

But I do feel that a more smooth developer experience would be something like this:

<button phx-click={toggle_menu("#menu")}>Menu</button>

def toggle_menu(to) do
  JS.toggleClasses(to: to, in: "block", out: "hidden")
  JS.toggleClasses(to: "#menu-button--icon", in: "block", out: hidden")
end

I’m very open to being wrong about this, because what I’m suggesting is that LiveView.JS should manage the state of the classes for a component. But that said, JS.toggle is already managing this state to determine if it should apply display: none or display: block, so I imagine the implementation would be similar.

What I’m trying to get at is this - as it stands, it looks like JS.toggle is quite limited in use - it requires you to be okay with your component having its display overridden with display: block | flex | inline. In most cases with Tailwind, you really want a specific tailwind class to be applied, and you definitely don’t want your reactive modifiers (sm:, md:, etc) to be overridden.

Very curious as to your thoughts! Thanks again.

that’s what my linked dropdown component does:

The phx-click-away does the hide which you’ll need for a menu anyway, and the same button acts as show and hide because of that.

Also sounds like this is what you’re interested in: feat: toggle_classes (updated 2021/01/08) by nbw · Pull Request #1721 · phoenixframework/phoenix_live_view · GitHub

Note sure if you meant the PR on itself or the workaround proposed in the comments. If the latter, that works for classes, but fails if what you are trying to toggle is something else (like attributes for example).

For attributes, try swapping JS.add_class and JS.remove_class into @Nik’s workaround re-posted below.

def toggle_expanded(js \\ %JS{}) do
  js
  |> JS.remove_class(
    "expanded",
    to: "#outer-menu.expanded"
  )
  |> JS.add_class(
    "expanded",
    to: "#outer-menu:not(.expanded)"
  )
end

I tried that, couldn’t make it work, did it work for you? If so I will try to revisit it and see if it was something that I messed up