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

Changelog:

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