Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Toggle

### Overview

`KTToggle` is a Metronic's custom plugin defined in `[metronic]/theme/html/[demo]/src/js/components/base/toggle.js`.

### Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

    var _toggleObject = new KTToggle(_toggleElement, {
      target: KTUtil.getBody(),
      targetState: 'topbar-mobile-on',
      toggleState: 'active',
    });

### Options

    var options = {
      target: KTUtil.getBody(),
      targetState: 'topbar-mobile-on',
      toggleState: 'active',
    };

Field | Type | Description
--- | --- | ---
`target` | `string` | The target for the class name changed

Sample
    target: 'body'

`targetState` | `string` | The state class name to be added to the `target`

Sample
    targetState: 'topbar-mobile-on'

`toggleState` | `string` | The active state for the toggler

Sample
    toggleState: 'active'

### API Methods

Method | Description
--- | ---
`setDefaults(options)` | Set default options
`getState()` | Get toggle state
`toggle()` | Toggle
`toggleOn()` | Toggle on
`toggleOff()` | Toggle off
`on(name, handler)` | Attach event @returns {KTToggle}
`one(name, handler)` | Attach event that will be fired once @returns {KTToggle}