Toggle State Of DOM Element – easy-toggle-state

Preview:

Description:

easy-toggle-state is a pure JavaScript library to toggle the state of any elements using UI components such as Checkbox, Radio button, Tooltip, Accordion, Tabs, Lightbox, etc.

The main goal of this library is to toggle the CSS class of an element when the element or another element is clicked.

Basic usage:

Install the library with NPM:

# NPM
$ npm install easy-toggle-state --save

Or download the zip and then include the main JavaScript file on the webpage.

<script src="easy-toggle-state.es6.min.js"></script>

Specify the active class when an element is clicked. The default active class is is-active.

<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>

More HTML data attributes:

• 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-class-on-trigger: Toggle each class only on the trigger element.
• data-toggle-class-on-target: Toggle each class only on all the target elements.
• 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-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

Changelog:

v1.12.7 (09/29/2020)

• Now you can go further into toggling by choosing if some classes must be toggled only on trigger, or only on targets, or on both. And you can combine these options.
• Now you can fill these toggling attributes with as many classes as you need. If an attribute is left empty, the default class is-active is used.

v1.12.7 (09/14/2020)

• Update

v1.12.5 (01/30/2020)

• Update

v1.12.4 (12/06/2019)

• Update

v1.12.2 (08/28/2019)

• Fix not focusable input

v1.12.0 (07/04/2019)

• 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.

v1.11.0 (06/29/2019)

• 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.

v1.10.4 (06/15/2019)

• Update

v1.10.2 (04/27/2019)

• window.initEasyToggleState()
• data-toggle-outside behavior fix
• Dependencies update

v1.10.0 (04/26/2019)

• New data-toggle-outside-event attribute

v1.10.0 (01/25/2019)

• Fixed: window.initEasyToggleState(); does not work as expected

v1.9.5 (12/20/2018)

• update

v1.9.4 (11/17/2018)

• Doc and dependencies update

v1.9.3 (10/12/2018)

• Fixed Warning in console log if no data-toggle-class is found

v1.9.2 (10/12/2018)

• update

v1.9.1 (09/10/2018)

• update

v1.8.2 (09/07/2018)

• update

v1.8.0 (08/19/2018)

• update

v1.7.0 (07/04/2018)

• Sizes update

v1.6.5 (07/04/2018)

• update

v1.6.4 (06/30/2018)

• No more IE polyfills

v1.6.1 (06/28/2018)

• Escape key management fix

v1.6.1 (06/27/2018)

• bugfix

v1.6.0 (06/20/2018)

• bugfix

v1.5.5 (06/14/2018)

• bugfix

v1.5.3 (06/06/2018)

• Update

v1.5.0 (06/01/2018)

• Code optimizations

v1.4.2 (05/31/2018)

• IE11 version now working

v1.4.2 (05/24/2018)

• Better aria management