|Official Page:||Go to website|
|Last Update:||July 4, 2019|
The main goal of this library is to toggle the CSS class of an element when the element or another element is clicked.
Install the library with NPM:
# NPM $ npm install easy-toggle-state --save
Specify the active class when an element is clicked. The default active class is
<element data-toggle-class="active-class"> </element>
Also apply the active class to another element:
<element data-toggle-class="active-class" data-toggle-target="target-element"> </element>
Apply the active class to all child elements in a parent element.
<element data-toggle-class="active-class" data-toggle-target-parent="target-element"> </element>
Apply the active class to all sub-elements in itself.
<element data-toggle-class="active-class" data-toggle-target-self="selector"> </element>
Apply the active class to previous/next elements.
<element data-toggle-class="active-class" data-toggle-target-previous> </element> <element data-toggle-class="active-class" data-toggle-target-next> </element>
- data-toggle-is-active: Specify a trigger element and its targets toggled as default, set during the onload event. In this case, you should add the specified class name on each element, even if the script will check that for you.
- data-toggle-group=”groupName”: Specify if a trigger is a part of a group. Only one trigger of a group can be active at a time. It will actually behave like an accordion component.
- data-toggle-radio-group=”groupName”: Specify if a trigger is a part of a radio group. Only one trigger of a radio group can be active at a time.
- data-toggle-event=”event”: Specify the event that will toggle the class, mouseover for example. click by default if not specified.
- data-toggle-outside: Toggle off the class when the event is triggered again outside of the trigger element. The event will be the same as data-toggle-event value, or click by default.
- data-toggle-outside-event=”event”: When using data-toggle-outside attribute, add this attribute to use a specific event for that behavior.
- data-toggle-target-only: Toggle the class only on the target elements.
- data-toggle-escape: Toggle the class when the trigger element is active and when the escape key is pressed.
- data-toggle-arrows: Specify that when a grouped trigger is focused, you can navigate between other triggers of the same group with arrows ↑ → ↓ ←, home and end keys.
- data-toggle-trigger-off: Add this attribute to an element inside a target to enable it to toggle the state of this target. For example, a close button in a modal.
- data-toggle-modal: specify that the target is a modal, such as a dialog or a lightbox
- New “modal” feature: You can use the data-toggle-modal to specify that the target is a modal, such as a dialog or a lightbox. This way, when the target is active – open –, the focus is trapped inside this target. This means tabbing will only focus on focusable elements inside this target, letting anything outside be out of scope.
- To improve accessibility, you need to add the aria-pressed attribute on any button which has two distinct states, such as a switch button.
- Now, after clicking on a button with the data-toggle-trigger-off attribute (an element inside a target to toggle the state of this target), the focus is given back to the trigger.
- data-toggle-outside behavior fix
- Dependencies update
- New data-toggle-outside-event attribute
- Fixed: window.initEasyToggleState(); does not work as expected
- Doc and dependencies update
- Fixed Warning in console log if no data-toggle-class is found
- Sizes update
- No more IE polyfills
- Escape key management fix
- Code optimizations
- IE11 version now working
- Better aria management