Preview Purchase
Base Components

Tailwind CSS Collapse

Tailwind CSS Collapse allows allows you to create intuitive collapsible sections that can be easily expand hidden content by clicking on a designated toggle element.

Default

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

Source Code

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.

HTML Markup

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-->

Variants

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-->

Data Attribute Initialization

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.

JavaScript Initialization

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

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

Options

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.

Utilities

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

Methods

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

Events

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');
});
Previous Card Next Container