Description
Adds the ability to toggle a class when an event is triggered, can be setup to look for a data-toggle attribute to hold the configurations for the trigger. Does not use jQuery.
Options
| Property | Type | Default | Description |
|---|---|---|---|
| trigger / triggers |
Query String NodeList HTMLElement
|
Element with data-toggle attribute |
Provide either a query selector, a NodeList, or an HTML element to use as the Trigger. |
| target | Query String |
N/A | REQUIRED. Query selector for the target element. |
| activeClass | String |
toggle--active | Custom class name. |
| parent | Query String |
Closest parentNode element of the Trigger. |
Selector query for the parent element. |
| dataAttribute | String |
data-toggle | Attribute name to use instead of the default 'data-toggle' to hold specific settings for a Trigger. |
| event | String |
click | Space separated list of events a Trigger should listen to. |
| auto |
Boolean/String/Number (Milliseconds) |
false | If set to true, Toggle will fire immediately after document ready. If set to a Number (milliseconds) value, Toggle will fire after Number has ellapsed. If set to a breakpoint name, Toggle will fire when the breakpoint is matched. |
| persist | Boolean |
false | When true, keeps the Trigger active after losing focus, clicking on the body, or toggling other triggers. |
| siblingSelector | Query String |
N/A | If persist is set to true, the Trigger will unset other triggers that match its siblingSelector value. |
| skipSelector | Query String |
N/A | If persist is set to false, setting a Trigger will cause all other triggers to unset. Specify a selector to skip matching triggers. |
| unsetOnHoverOut | Boolean |
false | Unsets the Trigger when hovering out. |
| unsetSelf | Boolean |
true | Enable or disable the Trigger from unsetting itself. |
| unsetOthers | Boolean |
true | Enable or disable the Trigger from unsetting all other toggles (except those with persist set to TRUE) when triggered. |
| timeout | Integer (milliseconds) | 0 | Unsets the Trigger after timeout milliseconds. |
Events
| Event | Arguments | Description |
|---|---|---|
| beforeSet |
trigger: the trigger HTML element. |
Fires before the Toggle.set() method is triggered. Must return a truthy value, otherwise the Toggle.set() execution will be halted. |
| afterSet |
trigger: the trigger HTML element. |
Runs after the Toggle.set() method is triggered. |
| beforeUnsetAll |
trigger: the trigger HTML element. |
Runs inside the Toggle.set() method before unsetting all toggles to their default state. Return false on this callback to prevent unsetting other toggles and continue Toggle.set() execution. |
| afterUnset |
trigger: the trigger HTML element. |
Runs after the Toggle.unset() method is triggered. |
Methods
toggle(): Set or unsets the toggle.
set(): Sets the toggle.
unset(): Unsets the toggle.
Extras
[data-toggle-close]: An element with this attribute inside the toggle's target or parent will act as a close action for the active toggle.