Logo

Documentation v1.1.6

Preview
Light
Dark
System

Overview

Bootstrap Toggle is an exclusive component of Rider HTML Pro 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 here for 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");
});
try metronic buy mega bundle
Preview Get Help Buy Now