Bug with data-toggle-class-on-target

[jenstornell]

1. When loading tabs everything works as expected on load.
2. When clicking the second tab, all classes are removed from the first target. Exepected behaviour is to use data-toggle-class-on-taget which in my case is to toggle flex hidden. In this case it means, remove flex and keep hidden, not remove all classes.
3. When clicking around on the other tabs it works as expected.

My guess is that something unexpected happends when data-toggle-is-active is used on a tab. If I move that class to the second tab it causes the same problem, but for the second tab.

Code

Fiddle

https://jsfiddle.net/fzty12we/

HTML

<div class="example-tabs">
	<button type="button"
    data-toggle-class-on-trigger="bg-red-500 text-white"
    data-toggle-class-on-target="flex hidden"
		data-toggle-target="#tabPanel_1"
		data-toggle-radio-group="tabsGroup"
		data-toggle-is-active>
		tab 1
	</button>
	<button type="button"
    data-toggle-class-on-trigger="bg-red-500 text-white"
    data-toggle-class-on-target="flex hidden"
		data-toggle-target="#tabPanel_2"
		data-toggle-radio-group="tabsGroup">
		tab 2
	</button>
	<button type="button"
    data-toggle-class-on-trigger="bg-red-500 text-white"
    data-toggle-class-on-target="flex hidden"
		data-toggle-target="#tabPanel_3"
		data-toggle-radio-group="tabsGroup">
		tab 3
	</button>
</div>
<div class="hidden" id="tabPanel_1">
	Panel 1<br>
	Lorem ipsum dolor sit amet…
</div>
<div class="hidden" id="tabPanel_2">
	Panel 2<br>
	In in erat blandit ante mollis tincidunt…
</div>
<div class="hidden" id="tabPanel_3">
	Panel 3<br>
	Nam posuere tortor a augue vulputate…
</div>

CSS

.bg-red-500 {
  background: red;
}

.text-white {
  color: white;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

[Twikito]

Hey @jenstornell 👋

Well, I understand what happens here. When you set data-toggle-is-active on a trigger, I do not toggle but add classes. So here, you will have the two classes flex hidden on the first panel, and so, when you click on another trigger, those two classes are toggled, so removed, and the default display value is kept. Logical.

Actually, that's why I said in the documentation:

In this case, you should add the specified class name on each element, even if the script will check that for you.

In your example, I guess you should only toggle the flex class, so set data-toggle-class-on-target="flex", and it works.

But well… your example makes me think. Maybe I should really toogle classes instead of adding them for triggers that are active by default.
What do you think?

[Twikito]

Hey @jenstornell 👋

I thought about this a little bit longer, and it came to me that since we are now able to toggle as many classes as we want, the adding instead of toggling classes on active by default triggers doesn't make sence anymore.

I will change that behaviour.

[Twikito]

Hey @jenstornell 👋

It's now fixed! Using data-toggle-is-active attribute to set a trigger and its targets as active by default will toggle them once on initialization as a consequence.

More information here: https://github.com/Twikito/easy-toggle-state/releases/tag/v1.15.0