Describe the bug When putting data-toggle-class on a radio input or checkbox input it stops the native functionality of the input (i.e. the radio button does not visibly change). Can this be fixed so that both easy toggle state can occur and normal native input functions also work when interacting with input elements?

There are a few non-native checkbox and radio button demos in the documentation, but I would rather use native elements with the functionality and accessibility benefits and that those have.

e.g:

  <div class="target1 is-active">On</div>
  <div class="target2">Off</div>

  <fieldset>
    <label>
      <input 
        type="radio" 
        name="radios" 
        checked 
        data-toggle-class 
        data-toggle-target="[data-badge='target1']" 
        data-toggle-radio-group="radio" 
        data-toggle-is-active>
      Trigger 1
    </label>
    <label>
      <input 
        type="radio" 
        name="radios" 
        data-toggle-class
        data-toggle-target="[data-badge='target2']"
        data-toggle-radio-group="filter_type">
      Trigger 2
  </label>
  </fieldset>

Expected behavior To toggle the above active states on the target, and also allow native radio and checkbox inputs to change visibly.

Another plugin similar to this, https://abitgone.github.io/jQuery-Plugins/ClassToggle/ which works in this manor.

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?

Is there a way to unbind/destroy and reinit an easy-toggle instance? My scenario is that I want to use easy toggle on an element on mobile, but not on desktop. I was thinking in my JS on screen resize I could destroy or reinit the instance depending on the screen size.

Is there any way to expose before, after, on event hooks? I'm trying to avoid animating max-height and animate an explicit height that is set by JavaScript.

I have a form within a dialog popup, all tabbing working fine apart from when a form appears within the popup, is this a form issue or something i can tweak with easy-toggle?

The form tabs fine through the input fields when not in dialog popup.

Is it possible to toggle a class from another element, for example a slide navigation panel controlled via burger button. Once open close from another div.

Currently i have 2 buttons, the first opens the panel, adding active class, the second appears within that panel to close it, both are below...

Open Panel... <button type="button" class="site-header__mobile-button lines-nav main-btn " data-toggle-class data-toggle-escape data-toggle-target=" .whole-page, .navigation-panel_holder, .navigation-panel_main, body" title="Navigation">Open Menu</button>

Once open close panel... <button type="button" class="navigation-panel_main-button main-btn " data-toggle-class data-toggle-escape data-toggle-target=" .whole-page, .navigation-panel_holder, .navigation-panel_main, body" title="Navigation">Close Menu</button>

Both these work fine, but would it be possible to add another class, i'e an overlay outside of the panel so when you click anywhere else it toggles the above?

So a div click toggle class the above, the i try and set this up it seems to do funny things.

Hello! I absolutely love this library, so thanks for your work on it.

I'm having an issue using CSS selectors with data-toggle-trigger-off. I've got a dropdown nav that uses easy toggle state, and then two levels of sub-menus that use it as well. I've made a codepen to show the problem in action: https://codepen.io/awinnett/pen/KKMbBMV?editors=1000

• Dropdown nav
  • Level one trigger
    • Level two trigger
      • Level three trigger

In this case, I can open the dropdown, use the level one trigger to open the submenu with the level two trigger, and use data-toggle-trigger-off to get back to the menu with the level one trigger. However, if I go down to the level three trigger, I can't go all the way back to level one, because data-toggle-trigger-off stops working at that point at level two after that for some reason.

Thanks in advance for your help!

I need to be able to cancel a toggle event. For instance, I am tracking mouse movement to determine if a user is clicking or dragging on a tab slider. In the event they are dragging. I would like to be able to cancel the toggle in the toggleBefore event hook.

Sorry if I missed this, as its not currently mentioned in the docs.

I'd like to be able to split class concerns, i.e is-active and is-animating. This allows us to use the toggle in different ways. i .e having normal behaviour on a component with is-active, and then applying is-animated to separate components that need it.

Something like:

<button class="c-btn" data-toggle-class="is-active, is-animated" data-toggle-target="[data-component]">Button</button>

<div class="component" data-component>...</div>

Is your feature request related to a problem? Please describe. I'd love to be able to target both the <html> and an <div> element, so that I can manipulate both nodes.

Describe the solution you'd like When I click a trigger, I would like to add a class on the <html> element, and on the <div> element. For eg. modal--is-active class. This means I can trigger overflow hidden on the html to stop the viewport moving, whilst also activating the modal as well.

Describe alternatives you've considered I don't think this is possible yet.

Hello! First of all, thank you for this amazing library, great job!

I'm trying to implement a tooltip that would open after clicking a button with an img tag inside of it:

HTML

<button data-toggle-class-on-target="hidden" data-toggle-target=".tooltip" data-toggle-event="click" data-toggle-outside>
  <img src="https://secure.gravatar.com/avatar/37640f3902ef08c7fad7d306c912ebf0?d=identicon&s=200">
</button>
<span class="tooltip hidden">Awesome tooltip</span>

CSS

.hidden {
  display: none !important;
}

.tooltip {
  background-color: #00b074;
  color: white;
}

button {
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  outline: none;
}

img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

https://codepen.io/lukaszwnek/pen/pobVZQo

However, clicking the button doesn't seem to show the tooltip. It starts working when I either:

1. remove the data-toggle-outside attribute from the button (which I don't want to do since I need that to close it).
2. moving all the data-toggle attributes to the img (but this goes against your own recommendation to use buttons as triggers).

The issue isn't limited to the img tag, from what I've seen it persists with any tag inside of the button (only plain text works).

It feels like a bug, but maybe there's something wrong with my setup? I'd really appreciate your opinion @Twikito.

Thanks!

Describe the bug Having created a mobile menu toggle with the unbind action being called from mobile to desktop. I noticed that if an element has data-toggle-trigger-off it does not unbind with the rest of the unbound elements

To Reproduce https://codepen.io/suitemel/pen/xxJEWwK Here is a codepen with the issue reproduced

Expected behavior I expect the data-toggle-trigger-off elements to be unbound as well

Desktop (please complete the following information):

• OS: macOS Big Sur v 11.7.1
• Browser: Chrome
• Version 108.0.5359.124

Is your feature request related to a problem? Please describe. I'm always frustrated when I need to wait the initialization of the triggers to have the default state of the target elements. This behavior creates some glitchs or layout shifting which provides a bad user experience.

Describe the solution you'd like Can it be possible to have an attribute like data-toggle-is-active (eg: data-toggle-target-is-active) for the target elements to avoid waiting initialization to have the default state for target elements ?

Describe alternatives you've considered None.

Additional context None.

Describe the bug In the documentation, the Codepen example associated to simple tabs doesn't work as expected.

To Reproduce Steps to reproduce the behavior:

1. Follow the codepen link in the documentation for simple tabs
2. See error

Expected behavior The expected behavior is the one described in documentation.

Screenshots

Desktop (please complete the following information):

• OS: macOS Monterey 12.4
• Browser: Safari
• Version: 15.5

Additional context None.

I'm trying to setup a menu navigation so each sub nav opens and closes the other however, i also want the parent a tag an active class added as well. <li><a href="#">Button outer</a><button type="button" class="main-btn" data-toggle-class data-toggle-escape data-toggle-target-next=".sub-menu" data-toggle-group="main-nav" title="Sub Navigation">Button for sub</button></li>

So i set it up like this...

<li><a href="#">Button outer</a><button type="button" class="main-btn" data-toggle-class data-toggle-escape data-toggle-target-next=".sub-menu" data-toggle-group="main-nav" data-toggle-target-parent="a" title="Sub Navigation">Button for sub</button></li>

This works by adding the active class to the a above but now ignores the sub menu group.

Shouldn't these work together?

Is it possible to trigger a method that toggles an element so I can toggle it via some custom javascript logic?

Some context: I have a table with a button in a tr element that, when clicked, displays "child" tr elements (from the DOM's perspective, though, these tr elements are sibling elements). each of those child tr elements also has a button that displays their own "child" elements. If I toggle the top-level tr button to hide its children, I want to also hide its grandchildren. Does that make sense?

Bumps lint-staged from 10.5.4 to 11.1.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.