All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Toggle class

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 trigger.

The toggle has a state. It is either "on" or "off". It works by switching between the CSS classes in classNameOn and 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 true or false, respectively.

You can get the current state of the Toggle by calling getState, or by checking if your trigger element has the "active" class. The state can be changed through JavaScript. Just call setState(true) to turn the Toggle on (or setState(false) to turn it off).

Methods
Method name	Description
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)

new Ink.UI.Toggle(selector, [options])

Accepts

selector
Trigger element. By clicking this, the target (or targets) are triggered.
options
Options object, containing:
options.target
CSS Selector that specifies the elements that this component will toggle
options.isAccordion
Set 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.classNameOn
CSS class to toggle when on. Defaults to 'show-all'.
options.classNameOff
CSS class to toggle when off. Defaults to 'hide-all'.
options.triggerEvent
Event that will trigger the toggling. Defaults to 'click'.
options.closeOnClick
Flag to toggle the target off when clicking outside the toggled content. Defaults to true.
options.canToggleAnAncestor
Set to true if you want the toggle to target ancestors of itself. Defaults to false.
options.closeOnInsideClick
Toggle off when a child element matching this selector is clicked. Set to null to deactivate the check. Defaults to 'a[href]'.
options.initialState
Flag to define initial state. false: off, true: on, null: markup. Defaults to null.
options.onChangeState
Callback when the toggle state changes. Return `false` to cancel the event.

Basic usage

In the example below we can see an alert being toggled

Demo

This is a details section

Insert awesome text here

Code

<button id="myAlertToggler" class="ink-button" data-target="#myAlert">See more</button>
<div id="myAlert" class="ink-alert block hide-all" role="alert">
    <h4>This is a details section</h4>
    <p>Insert awesome text here</p>
</div>

<script>
    Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
        new Toggle('#myAlertToggler');
    });
</script>

Toggle between two classes, to switch the color of a label between red and blue.

Demo

I can change my color if you push click the button.

Code

<button id="myToggleClass"
    class="ink-button"
    data-target="#myToggledLabel"
    data-class-name-on="green"
    data-class-name-off="red">Click here to toggle the label</button>
<div id="myToggledLabel" class="green half-top-space">
    I can change my color if you push click the button.
</div>

<script>
    Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
        new Toggle('#myToggleClass');
    });
</script>

.getState() method

Gets the state of the toggle. (on/off)

.setState(on, callHandler) method

Sets the state of the toggle. (on/off)

Accepts

on
New state (on/off)
callHandler
Whether to call the onChangeState handler.