Multiple targets with different classes?

[jlahijani]

I understand that multiple targets can be assigned, but can multiple targets have their own set of classes be toggled as well? Right now it seems the multiple targets must use the same classes.

[Twikito]

Hi @jlahijani,
Thanks for taking time to submit this comment.

That's exactly that, yes. Multiple targets must use the same set of classes to toggle.
Changing that would complexify the stuff way too much, don't you think?

[jlahijani]

Thanks for the reply @Twikito.

The use case I had was the following. Right now with TailwindUI, many of the sections require JavaScript. TailwindUI has 3 options for these sections that require JavaScript:

• use HeadlessUI (react)
• use HeadlessUI (vue)
• use HeadlessUI (alpine) -- this option doesn't exist yet but will in the near future (this is what I'm waiting for)
• use your own Javascript

Easy Toggle State is actually a nice fit for many of the sections and could be the "use your own JavaScript" approach.

While experimenting, I came across a section that utilized an accordion. It's the first one on this page (but you won't be able to see the interactive example unless you have a paid account):
https://tailwindui.com/components/marketing/sections/faq-sections

Anyway, when an accordion item is clicked, it must open the corresponding panel AND also apply a different CSS class to the item arrow to indicate an active state. So, one trigger targets two different elements each with their own classes.

Easy Toggle State's accordion example circumvents this with some clever SCSS but with Tailwind, it's all about toggling classes themselves.

One thought I had is something like this (notice the commas):

<button
  data-toggle-target="#selector-1, #selector-2"
  data-toggle-class-on-target="class-on-selector-1a class-on-selector-1b, class-on-selector-2a class-on-selector-2b"
>

data-toggle-target="#selector-1, #selector-2" is already valid and possible with Easy Toggle State.

data-toggle-class-on-target="class-on-selector-1a class-on-selector-1b, class-on-selector-2a class-on-selector-2b" as it is right now will add everything to #selector-1. I was thinking that if having a comma, it would match it with #selector-2 and apply it to that element instead.

Does this sound reasonable?

[Twikito]

Well, this is interesting actually.

The problem here is that the target defined by data-toggle-target must be a css selector, so in your example #selector-1, #selector-2, which is a correct selector, tells to target two elements, but not to seperate them from toggling the specified classes.

The only way I see could be to enhance the selection and the class list to a be able to specify a table, sush as

<button
    data-toggle-target="[
        '#selector-1',
        '#selector-2'
    ]"
    data-toggle-class-on-target="[
        'class-on-selector-1a class-on-selector-1b',
        'class-on-selector-2a class-on-selector-2b'
    ]"
>

Seems doable, right?
But what about the trigger itself if I use data-toggle-class instead?

[jlahijani]

That looks like a great approach.

So data-toggle-class would add its classes to both the trigger and the target given current functionality:
https://twikito.github.io/easy-toggle-state/#toggling-combinations

... meaning it's optional shortcut of doing:

data-toggle-class-on-trigger='myclass1'
data-toggle-class-on-target='myclass1'

Therefore I think it would be fine to keep data-toggle-class functionality as is... meaning it should apply to all targets specified in the proposed syntax.

[Twikito]

Hey @jlahijani 👋

I thought a bit more on that request, and I think that to avoid any behaviour conflict, I'll create a new property, such as

<button data-toggle-class-config="{
    trigger: 'myclass1 myclass2 …',
    '#targetId': 'myclass1 myclass2 myclass3 …',
    '.targetClass': 'myclass1 myclass3 myclass4 …'
}">

What do you think?

[jlahijani]

Sounds good to me.