Tailwind Collapse allows allows you to create intuitive collapsible sections that can be easily expand hidden content by clicking on a designated toggle element.
Click on the toggle button to expand the additional information in the collapsed content.
Click on the toggle button to expand the additional information with show and hide indicator.
These data attributes allow you to set options for the accordion component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-collapse-hidden-class | Tailwind class to use for the hidden state of the collapse elements. | ||
data-kt-collapse-active-class | Custom class to use for the active state of the toggle and collapse elements. |
This table details the custom classes and data attributes used by the collapse component.
| Option | Description |
|---|---|
| Data Attributes | |
data-kt-collapse-active-class | Used to auto-initialize the collapse component on page load and provides a string value serving as an ID selector, |
Custom modifiers to control the accordion’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-collapse-active:* | A modifier that applies specific Tailwind classes when the collapsible becomes active. |
Use KTCollapse component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTCollapse(element, options) | Creates an object instance of KTCollapse class for the given DOM element and configuration options. |
expand() | Shows a collapsible element. |
collapse() | Hides a collapsible element. |
toggle() | Toggles a collapsible element to shown or hidden. |
getOption(name) | Retrieves the value of a configuration option by name parameter from a KTCollapse instance. |
getElement() | Retrieves the DOM element linked to a specific KTCollapse 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 KTCollapse instance from an element, including any associated data stored on the DOM element. |
const collapseEl = document.querySelector('#my_collapse');
const collapseItemEl = document.querySelector('#my_collapse_item_1');
const collapse = KTCollapse.getInstance(collapseEl);
// Create a new instance on demand.
const newCollapse = new KTAccordion(collapseEl, {
activeClass: 'active'
});
collapse.show(collapseItemEl);
collapse.hide(collapseItemEl);
collapse.toggle(collapseItemEl);Manage and interact with KTCollapse instances using these static methods of KTCollapse JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTCollapse object for all elements with the data-kt-collapse data attribute on page load. |
createInstances() | Allows to create KTCollapse instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the KTCollapse object associated with the given DOM element element. |
getOrCreateInstance(element) | Returns the existing KTCollapse object for the provided DOM element element, or creates a new instance if none exists, then returns the same. |
// Initialize all collapses
KTCollapse.init()
// Initialzie pending collapses
KTCollapse.createInstances();
// Get collapse object
const collapseEl = document.querySelector('#my_collapse');
const collapse = KTCollapse.getInstance(collapseEl);KTCollase 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 |
|---|---|
expand | Triggered immediately before a collapsible element is shown. |
expanded | Triggered immediately after a collapsible element is shown. |
collapse | Triggered immediately before a collapsible element is hidden. |
collapsed | Triggered immediately after a collapsible element is hidden. |
toggle | Triggered immediately before a collapsible element is toggled (expand/expanded). |
const collapseEl = document.querySelector('#my_collapse');
const collapse = KTCollapse.getInstance(collapseEl);
collapse.on('expand', () => {
console.log('expand event');
});
collapse.on('expanded', () => {
console.log('expanded event');
});
collapse.on('collapse', (detail) => {
detail.cancel = true;
console.log('collapse action canceled');
});