Metronic - Tailwind CSS Toggle

Utilize the


         data-toggle="#my_toggle_element"

attribute with an ID selector and


         data-toggle-class="hidden"

ttribute to theme the referenced element's visibilty.

Preview HTML

Toggling content is a popular technique in web development that enhances user interaction and engagement.

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element" data-toggle-class="hidden">
 Toggle Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

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


         hidden

class

Preview HTML

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element_2" data-toggle-class="hidden">
 Toggle Element
</button>
<div class="hidden max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element_2">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

Utilize


         data-toggle-class="border-danger bg-success-light"

attribute with Tailwind CSS classes to change the referenced element's appearance.

Preview HTML

Toggling content is a popular technique in web development that enhances user interaction and engagement.

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element_3" data-toggle-class="border-danger bg-success-light">
 Theme Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element_3">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

The following source file manages the JavaScript behavior of the Tailwind CSS Toggle component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the


         dist/assets/js/core.bundle.js

bundle, making it available globally across all pages.

File	Description
`src/core/components/toggle/toggle.ts`	The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Toggle component.

The following markup outlines the core structure of the Tailwind CSS Toggle component.

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element" data-toggle-class="hidden">
 Toggle Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

Auto-initialize all KTToggle instances on page load by adding the


         data-toggle="#element_id"

attribute to your toggle element. This triggers on the fly initialization by the KTToggle JavaScript component.

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element" data-toggle-class="hidden">
 Toggle Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

These attributes allow you to set options for the KTToggle component during initialization. The values you provide as strings are automatically converted to the appropriate KTToggle Options .

HTML Attribute	Type	Default	Description
`data-toggle`	`string`	-	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. Alternatively, you can remove it and perform initialization using JavaScript.
`data-toggle-class`	`string`	-	The Tailwind CSS class to apply for the toggled state of elements.
`data-toggle-atrribute`	`string`	-	The Tailwind CSS attribute with `true` value to apply for the toggled state of elements.
`data-toggle-active-class`	`string`	`"active"`	Tailwind CSS class to use for the active state of the toggler elements.

To initialize a new toggle component, pass the corresponding DOM element and configuration options to the KTToggle class constructor.

JavaScript HTML

				
					// Toggleer element
const togglerEl = document.querySelector('#my_toggler');

// Configuration options(optional)
const options = {
	target: '#my_toggle_element',
	class: 'border-danger bg-gray-100'
};

// Initialize object
const toggler = new KTToggle(togglerEl, options);

				
					<button class="btn btn-primary" data-toggle="false" id="my_toggler">
 Toggle Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

To initialize the toggle with JavaScript, use data-toggle="false" attribute instead. This prevents automatic initialization on page load.

This table outlines the configuration options for initialization of Tailwind CSS Toggle instances, using the KTToggle JavaScript component.

Property	Type	Default	Description
`target`	`string`	-	An ID selector of a toggleable element. Example: `"#my_toggleable"` .
`class`	`string`	-	The Tailwind CSS class to apply for the toggled state of elements.
`atrribute`	`string`	`true`	The Tailwind CSS attribute with value to apply for the toggled state of elements.
`activeClass`	`string`	`"active"`	Tailwind CSS class to use for the active state of the toggler elements.

Manage and interact with KTToggle instances using these static methods of


         KTToggle

class.

Method	Description
`init()`	Automatically initializes KTToggle object for all elements with the `data-toggle="true"` 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 `KTToggle` object 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.

JavaScript HTML

				
					// Initialize all togglees
KTToggle.init()

// Initialzie pending togglees
KTToggle.createInstances();

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

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element" data-toggle-class="hidden">
 Toggle Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>

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` .
`toggle()`	Toggles an element to shown or hidden.
`update()`	Maintains consistency between the toggler and the state of targeted elements, even when a targeted element is changed by a different part of the application.
`isActive()`	Returning a Boolean value of `true` if the toggle is activated.
`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.

JavaScript HTML

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

toggle.toggle();

				
					<button class="btn btn-primary" data-toggle="#my_toggle_element" id="my_toggler">
 Toggle Element
</button>
<div class="max-w-[325px] p-5 rounded-lg bg-gray-100 border-2" id="my_toggle_element">
 Toggling content is a popular technique in web development that enhances user interaction and engagement.
</div>


         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
`toggle`	Triggered immediately before an element is toggled.
`toggled`	Triggered immediately after an element is toggled.

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