Collapsible
A pure vanilla JS implementation of Zag JS Collapsible
Anatomy
The Collapsible component consists of the following data-part
root
trigger
content
Data attributes
Each collapsible can be set with different settings with the following data-attribute.
Callbacks
Each Collapsible component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the collapsible and a event listener for your event name
document.getElementById("my-callback-collapsible")
?.addEventListener("my-callback-collapsible-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Open your browser's console to see the events received when the collapsible is opened or closed
Open State Control
Dialog open state can be control with data attributes on any element, it can also be outside of the dialog
You must set a custom id for your collapsible, as the default is randomly generated
data-open-collapsible="collapsible-id"
data-close-collapsible="collapsible-id"
You also dispatch an event named collapsible:set-open to the collapsible id with a boolean value
const el = document.getElementById("my-collapsible");
if (el) {
el.dispatchEvent(
new CustomEvent("collapsible:set-open", {
detail: { value: true },
})
);
} else {
console.warn("Element with ID 'my-collapsible' not found");
}
Custom (Tailwind)
If you are using Tailwind styling, you can customize each collapsible and its parts with Tailwind utilities
Templates
Collapsible 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.