Default
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.
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>
Hidden
Appearance
Utilize
data-toggle-class="border-danger bg-success-light"
attribute with Tailwind CSS classes to change the referenced element's appearance.
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>
Source Code
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. |
HTML Markup
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>
Data Attribute Initialization
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. |
JavaScript Initialization
To initialize a new toggle component, pass the corresponding
DOM element and configuration options to the KTToggle class constructor.
// 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.
Options
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. |
Utilities
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.
|
// 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>
Methods
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. |
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>
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.
| 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');
});
