# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Bootstrap Toggle is an exclusive component of Metronic that provides a simple build-in Javascript solution to toggle an element's state via HTML attribute without the need to writing any custom or additional Javascript code. Use cases of this component can be aside or sidebar with minimize toggle support.

# Usage

Toggle's script bundles are globally included in all pages.

    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/js/scripts.bundle.js"></script>

# Initialization

- Toggle's Javascript is globally initialized and added into our script bundle.
- Add `data-kt-toggle="true"`to a HTML element to enable it. There are multiple additional HTML attributes you can include to configure Toggle directly.
- Toggle instances can also be controlled programmatically. See below for more info.

# Basic

Add `data-kt-toggle="true"`to any element element to enable it. Then add the additional attributes to configure the toggle.
Use the browser's inspect tool on the button below to preview the toggle in action.
Click herefor more info on the options.
Toggle target

    <!--begin::Toggle button-->
    <button id="kt_toggle_example_basic" class="btn btn-light-primary"
        data-kt-toggle="true"
        data-kt-toggle-state="active"
        data-kt-toggle-target="#kt_toggle_example_target"
        data-kt-toggle-name="toggle-name"
        >
        Click this toggle button and inspect the below element
    </button>
    <!--end::Toggle button-->

    <!--begin::Inline style-->
    <style>
        [data-kt-custom-toggle="on"] {
            border: 2px solid green;
        }
    </style>
    <!--end::Inline style-->

    <!--begin::Toggle tagert-->
    <div class="bg-light rounded p-10" id="kt_toggle_example_target">
        Toggle target
    </div>
    <!--end::Toggle tagert-->

# Markup Reference

Toggle uses HTML attributes to define the toggle configuration. Here are the references for each below
HTML Attribute references

Name | Type | Description
--- | --- | ---
`data-kt-toggle` | `mandatory` | Enables the element as a toggle.
`data-kt-toggle-state` | `mandatory` | A class to add into the toggle element. Accepts any string value. For example, if `data-kt-toggle-state="active"`is set, then the class `active`will be added or removed into the toggle element's class on click.
`data-kt-toggle-name` | `mandatory` | Defines the custom HTML attrbute name that will be added into the target element defined in `data-kt-toggle-target`. Accepts a string value without spaces.
`data-kt-toggle-target` | `mandatory` | Defines the target element to add or remove a custom HTML attribute when Toggle is clicked. The custom HTML attribute is created by using the value added in `data-kt-toggle-name`. For example, if we add in `data-kt-toggle-name="docs-basic-example"`and `data-kt-toggle-target="#kt_toggle_example_basic"`, when the button is clicked, `data-kt-docs-basic-example="on"`will be added into the targeted element. This additional HTML attribute can then be used for any custom Javascript hooks as required.

# Methods

All Bootstrap Toggle components are initialized automatically, however the following are Toggle's functionality methods for more control.

Name | Description
--- | ---
Static Methods
`createInstances (DOMString selector)` | Initializes Bootstrap Toggle instances by selector. Default value of `selector`is `[data-kt-toggle="true"]`. This method can be used to initialize dynamicly populated Bootstrap Toggle instances(e.g: after Ajax request).
    KTToggle.createInstances();
`getInstance (DOMElement element)` | Get the Toggle instance created
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
Public Methods
`toggle()` | Toggle the selected toggle element.
    toggle.toggle();
`enable()` | Set the toggle element to active or enabled.
    toggle.enable();
`disable()` | Set the toggle element to inactive or disabled.
    toggle.disable();
`isEnabled()` | Returns the toggle state as `true`or `false`
    toggle.isEnabled();
`getElement()` | Returns the toggle element.
    toggle.goElement();
`destroy()` | Removes the component instance from element.
    toggle.destroy();

# Events

Below are few events for hooking into the Toggle functionality.

Event Type | Description
--- | ---
`kt.toggle.change` | This event fires on when the toggle element is about to get toggled (either enabled or disabled).
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
    toggle.on("kt.toggle.change", function() {
        // console.log("kt.toggle.change event is fired");
    });
`kt.toggle.changed` | This event fires on when the toggle element has been toggled (either enabled or disabled).
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
    toggle.on("kt.toggle.changed", function() {
        // console.log("kt.toggle.changed event is fired");
    });
`kt.toggle.enable` | This event fires on when the toggle element is about to be enabled.
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
    toggle.on("kt.toggle.enable", function() {
        // console.log("kt.toggle.enable event is fired");
    });
`kt.toggle.enabled` | This event fires on when the toggle element has been enabled.
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
    toggle.on("kt.toggle.enabled", function() {
        // console.log("kt.toggle.enabled event is fired");
    });
`kt.toggle.disable` | This event fires on when the toggle element is about to be disabled.
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
    toggle.on("kt.toggle.disable", function() {
        // console.log("kt.toggle.disable event is fired");
    });
`kt.toggle.disabled` | This event fires on when the toggle element has been disabled.
    var toggleElement = document.querySelector("#kt_toggle_example_1");
    var toggle = KTToggle.getInstance(toggleElement);
    toggle.on("kt.toggle.disabled", function() {
        // console.log("kt.toggle.disabled event is fired");
    });

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now