These data attributes allow you to set options for the dismiss component during auto initialization.
Option
Type
Default
Description
data-kt-collapse-hidden-class
string
"hidden"
Tailwind class to use for the hidden state of the dismissable elements.
data-kt-dismiss-interrupt
Selectors
This table details the data attributes used by the dismiss component.
Name
Description
Data Attributes
data-kt-dismiss
Used to auto-initialize KTDismiss instances on page load and provides a string value serving as an ID selector, "#content_id" for a collapsible element. Alternatively, you can remove it and perform initialization using JavaScript.
Methods
Use KTDismiss component's API methods to programmatically control its behavior.
Method
Description
new KTDismiss(element, options)
Creates an object instance of KTCollapse class for the given DOM element and configuration options.
dismiss()
Executes the dismissal action on the target element.
getTargetElement()
Retrieves the DOM element targeted by a specific KTDismiss instance.
const dismisserEl = document.querySelector('#my_dismisser');const dismiss = KTDismiss.getInstance(dismisserEl);// Create a new instance on demand.const newDismiss = new KTDismiss(dismisserEl, { interrupt: true, mode: 'hide'});dismiss.dismiss();
Utilities
Manage and interact with KTDismiss instances using these static methods of KTDismiss JavaScript class.
Method
Description
init()
Automatically initializes KTDismiss object for all elements with the data-kt-dismiss attribute on page load.
createInstances()
Allows to create KTDismiss instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element)
Returns the KTDismiss object associated with the given DOM element .
// Initialize all dismissesKTDismiss.init()// Initialzie pending dismissesKTDismiss.createInstances();// Get dismiss objectconst dismisserEl = document.querySelector('#my_dismisser');const dismiss = KTDismiss.getInstance(dismisserEl);
Events
KTDismiss 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
dismiss
dismiss Triggered immediately before a dismissible element is hidden.
dismissed
Triggered immediately after a dismissible element is hidden.
Prevents event propagation when the dismiss element is clicked.
data-kt-dismiss-mode
enum
"remove"
By using "hide" mode, you can hide dismissed elements within the DOM structure, preserving their state for potential re-display later. This differs from the default behavior "remove" , which permanently removes them from the DOM.
getOption(name)
Retrieves the value of a configuration option by name parameter from a KTDismiss instance.
getElement()
Retrieves the DOM element linked to a specific KTDismiss instance.
on(eventName, handler)
Allows attaching event listeners to the KTCollapse custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTCollapse. 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 KTDismiss instance from an element, including any associated data stored on the DOM element.
element
getOrCreateInstance(element)
Returns the existing KTDismiss object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
