The Tailwind Toggle component allows users to easily toggle the visibility of elements, providing seamless control over hiding and showing content.
Utilize the data-kt-toggle="#my_toggle_element" attribute with an ID selector and data-kt-toggle-class="hidden" ttribute to theme the referenced element's visibilty.
Set the referenced element to be hidden by default by applying the hidden class
Utilize data-kt-toggle-class="border border-red-600 bg-green-700" attribute with Tailwind classes to change the referenced element's appearance.
These data attributes allow you to set options for the toggle component during auto initialization.
| Name | Type | Default | Description |
|---|---|---|---|
data-kt-toggle-class | string | - | The Tailwind class to apply for the toggled state of elements. |
data-kt-toggle-attribute | string | - | The Tailwind attribute with true value to apply for the toggled state of elements. |
data-kt-toggle-active-class | string | "active" | Tailwind class to use for the active state of the toggler elements. |
This table details the custom classes and data attributes used by the toggle component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-toggle" | Used to auto-initialize KTToggle instances on page load and provides a string value serving as an ID selector, "#content_id" for a toggle content element. |
Custom modifiers to control the toggle’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-toggle-active:* | A modifier that applies specific Tailwind classes when the section becomes active. |
Use KTToggle component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTToggle(element, options) | Creates an object instance of KTToggle class for the given DOM element and configuration options . |
show(element) | Shows the toggle section that corresponds to the given DOM element . |
hide(element) | Hides the toggle section that corresponds to the given DOM element . |
toggle(element) | Toggles the toggle section that corresponds to the given DOM element . |
getOption(name) | Retrieves the value of a configuration option by name parameter from a KTToggle instance. |
getElement() | Retrieves the DOM element linked to a specific KTToggle instance. |
on(eventName, handler) | Allows attaching event listeners to the KTToggle custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTToggle. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed. |
off(eventName, eventId) | Removes an event listener for the eventName and eventId parameters attached with the on method. |
dispose() | Removes the KTToggle instance from an element, including any associated data stored on the DOM element. |
const togglerEl = document.querySelector('#my_toggler');
const toggle = KTToggle.getInstance(togglerEl);
toggle.toggle();Manage and interact with KTToggle instances using these static methods of KTToggle JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTToggle object for all elements with the data-kt-toggle attribute on page load. |
createInstances() | Allows to create KTToggle instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the KTToggleobject associated with the given DOM element element . |
getOrCreateInstance(element) | Returns the existing KTToggle object for the provided DOM element element , or creates a new instance if none exists, then returns the same. |
// Initialize all togglees
KTToggle.init()
// Initialzie pending togglees
KTToggle.createInstances();
// Get toggle object
const togglerEl = document.querySelector('#my_toggler');
const toggle = KTToggle.getInstance(togglerEl);KTToggle custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
show | Triggered immediately before an toggle section is shown. |
shown | Triggered immediately after an toggle section is shown. |
hide | Triggered immediately before an toggle section is hidden. |
hidden | Triggered immediately after an toggle section is hidden. |
toggle | Triggered immediately before an toggle section is toggled(shown/hidden). |
const togglerEl = document.querySelector('#my_toggler');
const toggle = KTToggle.getInstance(togglerEl);
toggle.on('toggle', () => {
detail.cancel = true;
console.log('toggle action canceled');
});
toggle.on('toggled', () => {
console.log('toggled event');
});