Metronic - Tailwind CSS Collapse

Click on the toggle button to expand the additional information in the collapsed content.

				
					<button class="btn btn-primary mb-5" data-collapse="#collapsible_content">
 Toggle Content
</button>
<div class="card transition-all duration-300 hidden" id="collapsible_content">
 <div class="card-header">
  <h3 class="card-title">
   Collapsible
  </h3>
 </div>
 <div class="card-body">
  Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
 </div>
</div>

The following source file manages the JavaScript behavior of the Tailwind CSS Collapse 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/collapse/collapse.ts`	The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Collapse component.

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

				
					<!--begin:Toggle button-->
<button class="btn btn-primary mb-5" data-collapse="#collapsible_content">
 Toggle Content
</button>
<!--end:Toggle button-->
<!--begin:Collapsible content-->
<div class="transition-all duration-300 hidden" id="collapsible_content">
 Example content goes here
</div>
<!--end:Collapsible content-->

Easily style the active toggle and collapse elements with the


         collapse-active:*

varaint linked to


         active

class that is added on toggle element click. This custom Tailwind CSS Variant allows you to control the appearance of both the toggle and collapse elements and their child elements.

				
					<!--begin:Toggle button-->
<button class="btn btn-primary mb-5 collapse-active:bg-primary-active" data-collapse="#collapsible_content">
 Toggle Content
</button>
<!--end:Toggle button-->
<!--begin:Collapsible content-->
<div class="card transition-all duration-300 hidden collapse-active:bg-gray-100" id="collapsible_content">
 <div class="card-header">
  <h3 class="card-title">
   Collapsible
  </h3>
 </div>
 <div class="card-body">
  Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.
 </div>
</div>
<!--end:Collapsible content-->

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


         data-collapse="true"

attribute to your collapse elements. This triggers on the fly initialization by the KTCollapse JavaScript component.

				
					<!--begin:Toggle button-->
<button class="btn btn-primary mb-5" data-collapse="#collapsible_content">
 Toggle Content
</button>
<!--end:Toggle button-->
<!--begin:Collapsible content-->
<div class="transition-all duration-300 hidden" id="collapsible_content">
 Example content goes here
</div>
<!--end:Collapsible content-->

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

HTML Attribute	Type	Default	Description
`data-collapse`	`string`	-	Used to auto-initialize KTCollapse 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.
`data-collapse-hidden-class`	`string`	`"hidden"`	Tailwind CSS class to use for the hidden state of the collapse elements.
`data-collapse-active-class`	`string`	`"active"`	Custom class to use for the active state of the toggle and collapse elements.

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

JavaScript HTML

				
					// Collapse toggle element
const collapseEl = document.querySelector('#my_collapse');

// Configuration options(optional)
const options = {
	activeClass: 'active'
};

// Initialize object
const collapse = new KTCollapse(collapseEl, options);

				
					<!--begin:Toggle button-->
<button class="btn btn-primary mb-5" data-collapse="#collapsible_content" id="my_collapse">
 Toggle Content
</button>
<!--end:Toggle button-->
<!--begin:Collapsible content-->
<div class="transition-all duration-300 hidden" id="collapsible_content">
 Example content goes here
</div>
<!--end:Collapsible content-->

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

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

Option	Type	Default	Description
`target`	`string`	-	An ID selector of a collapsible element. Example: `#my_collapsible_element` .
`hiddenClass`	`string`	`"hidden"`	Tailwind CSS class to use for the hidden state of the collapse elements.
`activeClass`	`string`	`"active"`	Custom class to use for the active state of the toggle and collapse elements.

Manage and interact with KTCollapse instances using these static methods of


         KTCollapse

class.

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

JavaScript HTML

				
					// Initialize all collapses
KTCollapse.init()

// Initialzie pending collapses
KTCollapse.createInstances();

// Get collapse object
const collapseEl = document.querySelector('#my_collapse');
const collapse = KTCollapse.getInstance(collapseEl);

				
					<!--begin:Toggle button-->
<button class="btn btn-primary mb-5" data-collapse="#collapsible_content">
 Toggle Content
</button>
<!--end:Toggle button-->
<!--begin:Collapsible content-->
<div class="transition-all duration-300 hidden" id="collapsible_content">
 Example content goes here
</div>
<!--end:Collapsible content-->

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.

JavaScript HTML

				
					const collapseEl = document.querySelector('#my_collapse');
const collapseItemEl = document.querySelector('#my_collapse_item_1');
const collapse = KTCollapse.getInstance(collapseEl);

collapse.show(collapseItemEl);
collapse.hide(collapseItemEl);
collapse.toggle(collapseItemEl);

				
					<!--begin:Toggle button-->
<button class="btn btn-primary mb-5" data-collapse="#collapsible_content" id="my_collapse">
 Toggle Content
</button>
<!--end:Toggle button-->
<!--begin:Collapsible content-->
<div class="transition-all duration-300 hidden" id="collapsible_content">
 Example content goes here
</div>
<!--end:Collapsible content-->


         KTCollapse

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