Tailwind Toggle

Examples

Basic Usage

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.

<div class="space-y-3">
  <button
    class="kt-btn"
    data-kt-toggle="#toggle_element"
    data-kt-toggle-class="hidden"
  >
    Toggle Element
  </button>
  <div
    id="toggle_element"
    class="max-w-[325px] p-4 rounded-lg border border-border text-sm"
  >
    Toggling content is a popular technique in web development that enhances
    user interaction and engagement.
  </div>
</div>

Hidden

Set the referenced element to be hidden by default by applying the hidden class

<div class="space-y-2.5">
  <button
    class="kt-btn"
    data-kt-toggle="#toggle_element"
    data-kt-toggle-class="hidden"
  >
    Toggle Element
  </button>
  <div
    id="toggle_element"
    class="hidden max-w-[325px] p-4 rounded-lg border border-border text-sm"
  >
    Toggling content is a popular technique in web development that enhances
    user interaction and engagement.
  </div>
</div>

Appearance

Utilize data-kt-toggle-class="border border-red-600 bg-green-700" attribute with Tailwind classes to change the referenced element's appearance.

<div class="space-y-2.5">
  <button
    class="kt-btn"
    data-kt-toggle="#toggle_element"
    data-kt-toggle-class="border-red-600"
  >
    Theme Element
  </button>
  <div
    id="toggle_element"
    class="text-sm max-w-[325px] p-4 rounded-lg border border-border"
  >
    Toggling content is a popular technique in web development that enhances
    user interaction and engagement.
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the toggle component during auto initialization.

Selectors

This table details the custom classes and data attributes used by the toggle component.

Tailwind Modifiers

Custom modifiers to control the toggle’s style and behavior with Tailwind classes.

Methods

Use KTToggle component's API methods to programmatically control its behavior.

const togglerEl = document.querySelector('#my_toggler');
const toggle = KTToggle.getInstance(togglerEl);
 
toggle.toggle();

Utilities

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);

Events

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.

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');
});