Overview

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 Example

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 button and inspect the below element
</button>
<!--end::Toggle button-->

<!--begin::Toggle tagert-->
<div class="bg-light rounded p-5  mt-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 toggle components are initialized automatically, however the following are Toggle's functionality methods for more control.

Name	Description
Static Methods
`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();`
`goElement`	Returns the toggle element. `toggle.goElement();`

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"); });`