@borngroup/born-toggle

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.