Preview Purchase
Base Components

Tailwind CSS Accordion

Tailwind CSS Accordion is a collapsible UI element built using Tailwind CSS. It allows users to expand and collapse sections of content by clicking on headers, revealing and hiding information on demand.

Default Accordion

Use data-accordion="true" to enable accordion behavior where clicking a section header expands its content, while others collapse.
Preview HTML

Default Open

Use active class on an accordion to display a specific section by default.
Preview HTML
Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision.

Expand All

Use data-accordion-expand-all="true" attribute to keep all accordions visible at all times despite toggling other.
Preview HTML
Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision.
Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision.

Border Style

Remove the accordion-default class and apply Tailwind's border classes (e.g., border, border-dashed) to add custom border styles to your accordion
Preview HTML
Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision.

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Accordion component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/accordion/accordion.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Accordion component.
src/core/plugins/components/accordion.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Accordion component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Accordion component. 
				
					<!--begin:: Accordion-->
<div data-accordion="true">
 <!--begin:: Accordion item-->
 <div class="accordion-item [&:not(:last-child)]:border-b border-b-gray-200" data-accordion-item="true" id="accordion_1_item">
  <!--begin:: Accordion toggle-->
  <button class="accordion-toggle py-4 group" data-accordion-toggle="#accordion_1_content">
   <span class="text-base text-gray-900 font-medium">
    Section Title 1
   </span>
   <i class="ki-outline ki-plus text-gray-600 text-base accordion-active:hidden block">
   </i>
   <i class="ki-outline ki-minus text-gray-600 text-base accordion-active:block hidden">
   </i>
  </button>
  <!--end:: Accordion toggle-->
  <!--begin:: Accordion content-->
  <div class="accordion-content hidden" id="accordion_1_content">
   <div class="text-gray-700 text-md pb-4">
    Content
   </div>
  </div>
  <!--end:: Accordion content-->
 </div>
 <!--end:: Accordion item-->
 <!--begin:: Accordion item-->
 <div class="accordion-item [&:not(:last-child)]:border-b border-b-gray-200" data-accordion-item="true" id="accordion_2_item">
  <!--begin:: Accordion toggle-->
  <button class="accordion-toggle py-4 group" data-accordion-toggle="#accordion_2_content">
   <span class="text-base text-gray-900 font-medium">
    Section Title 2
   </span>
   <i class="ki-outline ki-plus text-gray-600 text-base accordion-active:hidden block">
   </i>
   <i class="ki-outline ki-minus text-gray-600 text-base accordion-active:block hidden">
   </i>
  </button>
  <!--end:: Accordion toggle-->
  <!--begin:: Accordion content-->
  <div class="accordion-content hidden" id="accordion_2_content">
   <div class="text-gray-700 text-md pb-4">
    Content
   </div>
  </div>
  <!--end:: Accordion content-->
 </div>
 <!--end:: Accordion item-->
</div>
<!--end:: Accordion-->

Attributes

The following HTML attributes are utilized by the accordion component to control its JavaScript behavior.
HTML Attribute Description
data-accordion-item="true" Used to identify individual accordion item elements within the accordion structure.
data-accordion-toggle="#content_id" Specifies an ID of an element that should be shown or hidden when the accordion header is clicked.

Classes

This table details the custom CSS classes used for styling the Tailwind CSS Accordion component.
Class Description
accordion-item Applies default styling for the accordion item. This class can be removed to customize the accordion using Tailwind CSS classes.
accordion-toggle Used for the accordion toggle element, which users interact with to expand and collapse sections.
accordion-content Used for the content of each accordion section, making it collapsible upon interaction with the toggle element.
active Sets a specific accordion item to be open initially when used togather with data-accordion-item attribute.
hidden Sets a specific accordion content to be hidden initially.

Variants

Easily style the active accordion section with the accordion-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 active accordion section and its child elements. 
				
					<!--begin:: Accordion-->
<div data-accordion="true">
 <!--begin:: Accordion item-->
 <div class="accordion-item [&:not(:last-child)]:border-b border-b-gray-200" data-accordion-item="true" id="accordion_1_item">
  <!--begin:: Accordion toggle-->
  <button class="accordion-toggle py-4 group" data-accordion-toggle="#accordion_1_content">
   <span class="text-base text-gray-900 font-medium accordion-active:text-primary">
    Section Title
   </span>
   <i class="ki-outline ki-plus text-gray-600 accordion-active:text-primary text-base accordion-active:hidden block">
   </i>
   <i class="ki-outline ki-minus text-gray-600 accordion-active:text-primary text-base accordion-active:block hidden">
   </i>
  </button>
  <!--end:: Accordion toggle-->
  <!--begin:: Accordion content-->
  <div class="accordion-content hidden" id="accordion_1_content">
   <div class="text-gray-700 text-md pb-4">
    Content
   </div>
  </div>
  <!--end:: Accordion content-->
 </div>
 <!--end:: Accordion item-->
</div>
<!--end:: Accordion-->

Data Attribute Initialization

Auto-initialize all KTAccordion instances on page load by adding the data-accordion="true" attribute to your accordion element. This triggers on the fly initialization by the KTAccordion JavaScript component. 
				
					<div data-accordion="true" data-accordion-expand-all="true">
 ...
</div>
These attributes allow you to set options for the KTAccordion component during initialization. The values you provide as strings are automatically converted to the appropriate KTAccordion Options .
HTML Attribute Type Default Description
data-accordion boolean true Used to auto-initialize KTAccordion instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
data-accordion-expand-all boolean false Using true allows all accordion sections to remain expanded even when another is opened.
data-accordion-hidden-class string "hidden" Tailwind CSS class to use for the hidden state of the accordion contents.
data-accordion-active-class string "active" Custom class to use for the active state of the accordion contents.

JavaScript Initialization

To initialize a new accordion component, pass the corresponding DOM element and configuration options to the KTAccordion class constructor.
JavaScript HTML 
				
					const accordionEl = document.querySelector('#my_accordion');
const options = {
	expandAll: true
};

const accordion = new KTAccordion(accordionEl, options);

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

Options

This table outlines the configuration options for initialization of Tailwind CSS Accordion instances, using the KTAccordion JavaScript component.
Option Type Default Description
expandAll boolean false Allows all accordion sections to remain expanded even when another is opened
hiddenClass string "hidden" Tailwind CSS class used to set a specific accordion content hidden.
activeClass string "active" Custom class used to set a specific accordion content visible.

Utilities

Manage and interact with KTAccordion instances using these static methods of KTAccordion class.
Method Description
init() Automatically initializes KTAccordion object for all elements with the data-accordion="true" attribute on page load.
createInstances() Allows to create KTAccordion instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTAccordion object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTAccordion object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all accordions
KTAccordion.init()

// Initialzie pending accordions
KTAccordion.createInstances();

// Get accordion object
const accordionEl = document.querySelector('#my_accordion');
const accordion = KTAccordion.getInstance(accordionEl);

Methods

Use KTAccordion component's API methods to programmatically control its behavior.
Method Description
new KTAccordion(element, options) Creates an object instance of KTAccordion class for the given DOM element and configuration options .
show(element) Shows the accordion section that corresponds to the given DOM element .
hide(element) Hides the accordion section that corresponds to the given DOM element .
toggle(element) Toggles the accordion section that corresponds to the given DOM element .
getOption(name) Retrieves the value of a configuration option by name parameter from a KTAccordion instance.
getElement() Retrieves the DOM element linked to a specific KTAccordion instance.
on(eventName, handler) Allows attaching event listeners to the KTAccordion custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTAccordion. 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 KTAccordion instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const accordionEl = document.querySelector('#my_accordion');
const accordionItemEl = document.querySelector('#my_accordion_item_1');
const accordion = KTAccordion.getInstance(accordionEl);

accordion.show(accordionItemEl);
accordion.hide(accordionItemEl);
accordion.toggle(accordionItemEl);

Events

KTAccordion 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
show Triggered immediately before an accordion section is shown.
shown Triggered immediately after an accordion section is shown.
hide Triggered immediately before an accordion section is hidden.
hidden Triggered immediately after an accordion section is hidden.
toggle Triggered immediately before an accordion section is toggled(shown/hidden). 
				
					const accordionEl = document.querySelector('#my_accordion');
const accordion = KTAccordion.getInstance(accordionEl);

accordion.on('show', () => {
	console.log('show event');
});

accordion.on('shows', () => {
	console.log('shown event');
});

accordion.on('hide', (detail) => {
	detail.cancel = true;
	console.log('hide action canceled');
});
Previous Composer Next Avatar