Toggle Active

A simple component to replace the so called "checkbox hack" which we can't use because of issues in iOS, Android, and old IE.

This component has an event-driven API if you wish to extend its functionality. Hook into :toggleActive/click events to be notified of when the component updates, fire :toggleActive/update to trigger the update function (passing in the target node).

Setup

require([ "lib/components/toggle_active" ], (ToggleActive) {
  new ToggleActive(arguments);
});

Arguments

selector Selector for the toggle elements, default: .js-toggle-active

context Listen for all toggles within this context, default: null

listener Element to attach listeners onto, default: #js-row--content

Normal usage

<a href="#" class="js-toggle-active" data-toggle-target=".foo">toggle it</a>

This will toggle the is-active class on any element that has the foo class.

Specifying the class

<a href="#" class="js-toggle-active" data-toggle-target=".foo" data-toggle-class="custom-class">toggle it</a>

This will toggle the custom-class class on any element that has the foo class.

Toggling the clicked element as well

<a href="#" class="js-toggle-active" data-toggle-me="true" data-toggle-target=".foo">toggle it</a>

This will toggle the is-active class on the element that was clicked as well as any element with class of foo .