Tailwind Collapse allows allows you to create intuitive collapsible sections that can be easily expand hidden content by clicking on a designated toggle element.
Examples
Basic Usage
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.
<div class="w-full max-w-[75%]"> <div class="mb-2.5"> 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 class="mb-2.5 transition-[height] duration-300 hidden" id="collapse_content" aria-labelledby="collapse_toggle" > This is a collapse content hidden by default and show on the show more link click. </div> <button type="button" class="kt-link kt-link-underline" data-kt-collapse="#collapse_content" aria-expanded="false" aria-controls="collapse_content" id="collapse_toggle" > <span class="inline-flex items-center gap-1 kt-collapse-active:hidden" >Show more<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down kt-collapse-active:hidden size-4" aria-hidden="true" > <path d="m6 9 6 6 6-6"></path></svg></span ><span class="hidden items-center gap-1 kt-collapse-active:inline-flex" >Hide<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up kt-collapse-active:block hidden size-4" aria-hidden="true" > <path d="m18 15-6-6-6 6"></path></svg ></span> </button></div>
Component API
Options
These data attributes allow you to set options for the accordion 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 collapse elements.
data-kt-collapse-active-class
Selectors
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, #content_id for a collapsible element.
Tailwind Modifiers
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.
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.
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);
Utilities
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 object associated with the given DOM element .
// Initialize all collapsesKTCollapse.init();// Initialzie pending collapsesKTCollapse.createInstances();// Get collapse objectconst collapseEl = document.querySelector('#my_collapse');const collapse = KTCollapse.getInstance(collapseEl);
Events
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.
Custom class to use for the active state of the toggle and collapse elements.
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.
KTCollapse
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.
collapsed
Triggered immediately after a collapsible element is hidden.
toggle
Triggered immediately before a collapsible element is toggled (expand/expanded).
