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

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])


  • selector

    Trigger element. By clicking this, the target (or targets) are triggered.
  • options

    Options object, containing:

    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



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

    Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
        new Toggle('#myAlertToggler');

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


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


<button id="myToggleClass"
    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.

    Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
        new Toggle('#myToggleClass');

.getState() method

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

.setState(on, callHandler) method

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


  • on

    New state (on/off)
  • callHandler

    Whether to call the onChangeState handler.