Toggle the visibility of elements.
All samples are using
Ink.requireModules, please read how to use it at Ink.requireModules section
Important note: Do NOT use this as a dropdown! Use Ink.UI.Dropdown for that.
You need two elements to use Toggle: the
trigger element, and the
target element (or elements). The default behaviour is to toggle the
target(s) when you click the
The toggle has a state. It is either "on" or "off". It works by switching between the CSS classes in
classNameOff according to the current state.
When you initialize the Toggle, it will check if the targets are visible to figure out what the initial state is. You can force the toggle to consider itself turned "on" or "off" by setting the
initialState option to
You can get the current state of the Toggle by calling
getState, or by checking if your
trigger element has the "active" class.
to turn the Toggle on (or
setState(false) to turn it off).
|new Toggle(selector, [options])||Constructor|
|.getState()||Gets the state of the toggle. (on/off)|
|.setState(on, callHandler)||Sets the state of the toggle. (on/off)|
selectorTrigger element. By clicking this, the target (or targets) are triggered.
optionsOptions object, containing:
options.targetCSS Selector that specifies the elements that this component will toggle
options.isAccordionSet this to true to signal that this toggle is part of an accordion with other toggles. The toggles of an accordion must be common descendants of an element with the class "accordion". If they're not, Ink will warn you about this on the console.
options.classNameOnCSS class to toggle when on. Defaults to 'show-all'.
options.classNameOffCSS class to toggle when off. Defaults to 'hide-all'.
options.triggerEventEvent that will trigger the toggling. Defaults to 'click'.
options.closeOnClickFlag to toggle the target off when clicking outside the toggled content. Defaults to true.
options.canToggleAnAncestorSet to true if you want the toggle to target ancestors of itself. Defaults to false.
options.closeOnInsideClickToggle off when a child element matching this selector is clicked. Set to null to deactivate the check. Defaults to 'a[href]'.
options.initialStateFlag to define initial state. false: off, true: on, null: markup. Defaults to null.
options.onChangeStateCallback when the toggle state changes. Return `false` to cancel the event.
In the example below we can see an alert being toggled
Insert awesome text here
Toggle between two classes, to switch the color of a label between red and blue.
Gets the state of the toggle. (on/off)
Sets the state of the toggle. (on/off)
onNew state (on/off)
callHandlerWhether to call the onChangeState handler.