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
.