Different class on trigger and target?

[jenstornell]

Let's say I have the below:

<div data-toggle-class="active" data-toggle-target="#target">Trigger</div>
<div id="target">Target</div>

Then active will be added as a class to both the trigger and the target elements.

I can use data-toggle-target-only which disable the class on the target. However, that is not what I want in this case.

I would like one toggle class on the trigger element and another on the target.

Is that possible?

[Twikito]

Hi @jenstornell!
Thanks for taking time to add this comment.

No, for now it is not possible. By the way, I don't see why you would like to have differents class names. is-active is a generic name that should work for any context, and I have added the possibility to change it, so why are you asking for having two different class names. Shouldn't this be handle in you CSS?
Can you explain me more?

[jenstornell]

@Twikito I use https://tailwindcss.com/. With that library you add and remove utility classes for whatever you need. Nothing goes into the css file.

[Twikito]

@jenstornell Ok, I see. Let me investigate on what could be possible.

[Twikito]

@jenstornell Ok, tell me, what do you think if I add two new attibutes to be able to seperate behaviour?

• data-toggle-class="class-name" would still toggle the class on trigger and target•s
• data-toggle-class-trigger="class-name" would toggle the class only on the trigger
• data-toggle-class-target="class-name" would toggle the class only on target•s

And obviously, I would need to remove data-toggle-target-only attribute because data-toggle-class-target would actually replace it.

What do you think?

[jenstornell]

@Twikito Yes, I think the new approach would be great, except for it being a breaking change of cause.

This change alone would make it Tailwind compatible.

[Twikito]

@jenstornell Ok, great. I'll try to do that asap.

[jenstornell]

A workaround I use for this at the moment is the toggleAfter hook to add or remove classes programmatically.

[Twikito]

@jenstornell Almost done. Need to test a little bit more, and update documentation.

[Twikito]

@jenstornell Hey! It's done: these options are now availables!

Documentation is updated: https://twikito.github.io/easy-toggle-state/#toggling

[jenstornell]

@Twikito Sorry for my late reply. Finally I've got some time to get back to this.

I can confirm that it works. I tested it with the simple tabs example.

A note for others reading this issue, the data attributes has changed from this discussion to include an on.

data-toggle-class-on-trigger
data-toggle-class-on-target

Thank you for keeping this repo around, it's great!