Jolty UI Jolty UI Documentation Icons Colors


An interactive component which opens and closes content via expandable panel.

Getting started

To start, create a <div> with a data-ui-collapse attribute, and a <button> with the data-ui-toggle attribute, specifying the div’s id.

<button data-ui-toggle="my-collapse">Toggle content</button>
<div data-ui-collapse id="my-collapse" hidden>...</div>

Then, initialize all elements with the data-ui-collapse attribute.

import { Collapse } from "jolty";


Animation can be created in many ways, here are just a few examples:

<div data-ui-collapse data-ui-transition="collapse-fade" hidden>...</div>


The Collapse component supports the data-ui-dismiss attribute, which is common for almost all components and data-ui-dismiss="collapse", which only closes collapse. In this example, we use data-ui-autodestroy because after closing it, we want to remove the element from the DOM and from the JS memory.

<div data-ui-collapse data-ui-autodestroy data-ui-transition="scale-down-fade" role="alert" class="ui-alert ui-alert--primary">
    <div class="ui-icon ui-icon--info-circle"></div>
    <div><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
    <button type="button" class="ui-btn-close" data-ui-dismiss="collapse" aria-label="Close"></button>


initBooleantrueShould the instance be automatically initialized when an instance is created? If false, you’ll need to manually initiate it by calling collapse.init().
destroyBooleanfalseAllows you to destroy an instance at a specific breakpoint.
dataString''Allows you to use the default options that have been added by the static method. Attribute: data-ui-collapse
onObjectnullUsed to register event handlers.
appearBooleannullIf you want to apply a transition upon initialization as well, you can set this option to true. Attribute: data-ui-appear
eventPrefixString'ui-collapse:'Prefix for events dispatched on the collapse element.
eventDispatchBoolean, EventName[]trueDefines if events are dispatched or used only within options.
eventBubbleBoolean, EventName[]trueDefines if events should bubble up the DOM.
breakpointsObjectnullDefines custom options for specific breakpoints.
shownBooleannullDefines if the collapse is expanded after initialization. By default, it’s null, which means it checks the hidden attribute or another attribute, depending on stateMode.
togglerCSSSelector, Element, Element[], Function({id}) => '[data-ui-toggle~="id"],[href="#id"]'Defines the toggler element.
togglerClassActiveString'ui-active'CSS class for toggler element when the collapse element is expanded.
collapseClassActiveString'ui-active'CSS class for the collapse element when it’s expanded.
awaitAnimationBooleanfalseCan the collapse state be switched if it’s in the process of animation?
hashNavigationBooleantrueDefines whether to open the collapse during initialization if the URL hash and the it’s id are the same. Attribute: data-ui-hash-navigation
dismissBoolean, CSSSelectortrueAllows the collapse to be closed when the button is clicked. By default, it’s true, meaning the hide() method will be called when the button with the '[data-ui-dismiss=""],[data-ui-dismiss="collapse"]' attribute is clicked.
autodestroyBooleanfalseDefines whether the instance should be destroyed after closing. Attribute: data-ui-autodestroy
a11yBooleantrueAdds aria-controls, aria-expanded and role="button" attributes to the toggler element.
stateModeString'hidden'Accepts one of the next values 'hidden','hidden-until-found','inert','class-hidden','class-shown','remove' Attribute: data-ui-hide-mode
keepPlaceBooleantrueDefines if the component’s space is preserved when removed by stateMode: 'remove'.


teleportCSSSelector, Element, TeleportOptionsnullObject with TeleportOptions or CSSSelector, Element to set the to option for the teleport. Attribute: data-ui-teleport
toCSSSelector, ElementnullDefines where to move the collapse element.
positionString'beforeend'Defines the position for the collapse element once it has been moved. Accepts one of the next values 'beforebegin','afterbegin','beforeend' or 'afterend'
keepPlaceBooleanfalseDefines if the collapse element keeps its original place after being destroyed.

Hide mode

For more details on how to use, read the State mode section.


For more details on how to use, read the Transition section.


init()instanceInitializes the component.
destroy(destroyOptions)instance, nullDestroys the component and accepts an object as a option { remove: false, keepInstance: false, keepState: false }.
update(options)instanceAccepts options as an argument and updates the component.
on(name, handler)instanceAllows you to register event handler.
off(name, handler)instanceAllows you to remove event handler.
toggle(toggleOptions, force)promiseToggles the component’s visibility state between shown and hidden. Accepts true or false as a option, which sets the animated option or an object { animated: true, silent: false }.
show(toggleOptions)promiseOpens the component and accepts the same options as the toggle() method.
hide(toggleOptions)promiseCloses the component and accepts the same options as the toggle() method.

Class methods

toggle(id, force, toggleOptions)promiseSearches for an instance by id and calls its toggle() method with the specified options.
show(id, toggleOptions)promiseSearches for an instance by id and calls its show() method with the specified options.
hide(id, toggleOptions)promiseSearches for an instance by id and calls its hide() method with the specified options.
data(name?, data)ClassSets default options for components that have the property data:'name' or by the attribute data-ui-collapse="name".
updateDefault(options)optionsUpdates default options.
initAll(root)instance[]Searches for elements in root, which defaults to document with the attribute data-ui-collapse and initializes them.
get(id or elem)instanceSearches for an instance by id or element (checks the base property).
getOrCreate(id or elem, options)instanceSearches for an instance by id or element (checks the base property), if not found, creates a new instance with specified options.


idStringThe id of the base / collapse element.
isInitBooleanIndicates whether the instance is already initialized.
optsObjectContains the currently applied options for the current breakpoint.
baseOptsObjectContains all options, including the breakpoints option.
base, collapseElementAll components have a base property, which refers to the element through which the component is initialized and where events are fired. collapse is the same as base.
isOpenBooleanIndicates whether the collapse is currently shown.
initialPlaceNodeNodeReference to the node that is located where the collapse element was at the moment of initialization.

Class properties

DefaultObjectContains the default options for all instances.
instancesMapA Map that contains all instances of the Collapse class.


beforeInitinstanceEvent will fired right before initialization.
initinstanceFires when initialization has been completed.
beforeShowinstance, {trigger, event}Fires immediately when the show() method is called.
showinstance, {trigger, event}Fires when the element becomes visible, but the CSS transition hasn’t started yet.
showninstance, {trigger, event}Fires when the CSS transition hasn’t been completed.
beforeHideinstance, {trigger, event}Fires immediately when the hide() method is called.
hideinstance, {trigger, event}Fires just before the CSS transition starts.
hiddeninstance, {trigger, event}Fires when the CSS transition has been completed.
beforeDestroyinstanceFires before the instance is destroyed.
destroyinstanceFires immediately when the destroy() method is called.
breakpointinstance, breakpoint, prevBreakpointFires when the breakpoint has been changed.
anyeventName, instanceFires on any event occurrence. The first argument contains the name of the event.
2024 © A Project by Anatolii Moldovanov