Accordion
A pure vanilla JS implementation of Zag JS Accordion
Anatomy
The Accordion component consists of the following data-part
root
item
item-content
item-trigger
item-indicator
It can include multiple item, item-trigger and item-indicator parts.
data-value is required on all item, item-content, item-trigger and
item-indicator parts
Data attributes
Each accordion can be set with different settings with the following data-attribute.
Callbacks
Each Accordion component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the accordion and a event listener for your event name
document.getElementById("my-callback-accordion")
?.addEventListener("my-callback-accordion-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Open your browser's console to see the events received when the accordion value changes
Disabled
Each accordion can be disabled globally or per item.
Orientation
Each accordion can be set as horizontal or vertical.
RTL
RTL support for accordion
Custom (Tailwind)
If you are using Tailwind styling, you can customize each accordion and its parts with Tailwind utilities
Templates
Accordion components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.