Collapse

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.

html

<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";
Collapse.initAll();

Animation

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

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

<div data-ui-collapse class="collapsible-panel" hidden>...</div>
 
<style>
  .collapsible-panel.ui-enter-active,
  .collapsible-panel.ui-leave-active {
    transition-duration: 200ms;
    transition-property: height, opacity;
    transition-timing-function: ease-in-out;
    overflow: hidden;
  }
  .collapsible-panel.ui-enter-to,
  .collapsible-panel.ui-leave-from {
    height: var(--ui-transition-height);
  }
  .collapsible-panel.ui-enter-from,
  .collapsible-panel.ui-leave-to {
    opacity: 0;
    height: 0;
  }
</style>

<div
  data-ui-collapse
  data-ui-enter-active="transition-all duration-200 ease-in-out"
  data-ui-leave-active="transition-all duration-200 ease-in-out"
  data-ui-enter-from="opacity-0 height-0"
  data-ui-leave-to="opacity-0 height-0"
  data-ui-enter-to="h-[--ui-transition-height]"
  data-ui-leave-from="h-[--ui-transition-height]"
  hidden
>
  ...
</div>

<div id="my-collapse" hidden>...</div>
 
<script>
  new Collapse("#my-collapse", {
    transition: "collapse",
    // or
    transition: { name: "collapse" },
    // or
    transition: {
      enterActive: "transition-all duration-200 ease-in-out",
      enterFrom: "opacity-0",
      enterTo: "h-[--ui-transition-height]",
      leaveActive: "transition-all duration-200 ease-in-out",
      leaveFrom: "h-[--ui-transition-height]",
      leaveTo: "opacity-0",
    },
    // or
    transition: {
      enterActive: { transition: "all 200ms ease-in-out" },
      enterFrom: { opacity: 0 },
      enterTo: { height: "var(--ui-transition-height)" },
      leaveActive: { transition: "all 200ms ease-in-out" },
      leaveFrom: { height: "var(--ui-transition-height)" },
      leaveTo: { opacity: 0 },
    },
  });
</script>

Dismissing

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.

Hi there! I just want to say that you are wonderful and to have a nice day.

<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>
</div>

Options

Name	Type	Default	Description
`init`	`Boolean`	`true`	Should the instance be automatically initialized when an instance is created? If `false`, you’ll need to manually initiate it by calling `collapse.init()`.
`destroy`	`Boolean`	`false`	Allows you to destroy an instance at a specific breakpoint.
`data`	`String`	`''`	Allows you to use the default options that have been added by the `Collapse.data()` static method. Attribute: `data-ui-collapse`
`on`	`Object`	`null`	Used to register event handlers.
`appear`	`Boolean`	`null`	If you want to apply a transition upon initialization as well, you can set this option to `true`. Attribute: `data-ui-appear`
`eventPrefix`	`String`	`'ui-collapse:'`	Prefix for events dispatched on the `collapse` element.
`eventDispatch`	`Boolean, EventName[]`	`true`	Defines if events are dispatched or used only within options.
`eventBubble`	`Boolean, EventName[]`	`true`	Defines if events should bubble up the DOM.
`breakpoints`	`Object`	`null`	Defines custom options for specific breakpoints.
`shown`	`Boolean`	`null`	Defines 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`.
`toggler`	`CSSSelector, Element, Element[], Function`	`({id}) => '[data-ui-toggle~="id"],[href="#id"]'`	Defines the `toggler` element.
`togglerClassActive`	`String`	`'ui-active'`	CSS class for `toggler` element when the collapse element is expanded.
`collapseClassActive`	`String`	`'ui-active'`	CSS class for the `collapse` element when it’s expanded.
`awaitAnimation`	`Boolean`	`false`	Can the collapse state be switched if it’s in the process of animation?
`hashNavigation`	`Boolean`	`true`	Defines whether to open the collapse during initialization if the URL hash and the it’s `id` are the same. Attribute: `data-ui-hash-navigation`
`dismiss`	`Boolean, CSSSelector`	`true`	Allows 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.
`autodestroy`	`Boolean`	`false`	Defines whether the instance should be destroyed after closing. Attribute: `data-ui-autodestroy`
`a11y`	`Boolean`	`true`	Adds `aria-controls`, `aria-expanded` and `role="button"` attributes to the toggler element.
`stateMode`	`String`	`'hidden'`	Accepts one of the next values `'hidden','hidden-until-found','inert','class-hidden','class-shown','remove'` Attribute: `data-ui-hide-mode`
`keepPlace`	`Boolean`	`true`	Defines if the component’s space is preserved when removed by `stateMode: 'remove'`.

Teleport

Attribute	Type	Default	Description
`teleport`	`CSSSelector, Element, TeleportOptions`	`null`	Object with `TeleportOptions` or `CSSSelector, Element` to set the `to` option for the teleport. Attribute: `data-ui-teleport`

`to`	`CSSSelector, Element`	`null`	Defines where to move the `collapse` element.
`position`	`String`	`'beforeend'`	Defines the position for the `collapse` element once it has been moved. Accepts one of the next values `'beforebegin','afterbegin','beforeend'` or `'afterend'`
`keepPlace`	`Boolean`	`false`	Defines 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.

Transition

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

Methods

Name	Return	Description
`init()`	`instance`	Initializes the component.
`destroy(destroyOptions)`	`instance, null`	Destroys the component and accepts an object as a option `{ remove: false, keepInstance: false, keepState: false }`.
`update(options)`	`instance`	Accepts options as an argument and updates the component.
`on(name, handler)`	`instance`	Allows you to register event handler.
`off(name, handler)`	`instance`	Allows you to remove event handler.
`toggle(toggleOptions, force)`	`promise`	Toggles 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)`	`promise`	Opens the component and accepts the same options as the `toggle()` method.
`hide(toggleOptions)`	`promise`	Closes the component and accepts the same options as the `toggle()` method.

Class methods

Name	Return	Description
`toggle(id, force, toggleOptions)`	`promise`	Searches for an instance by `id` and calls its `toggle()` method with the specified options.
`show(id, toggleOptions)`	`promise`	Searches for an instance by `id` and calls its `show()` method with the specified options.
`hide(id, toggleOptions)`	`promise`	Searches for an instance by `id` and calls its `hide()` method with the specified options.
`data(name?, data)`	`Class`	Sets default options for components that have the property `data:'name'` or by the attribute `data-ui-collapse="name"`.
`updateDefault(options)`	`options`	Updates 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)`	`instance`	Searches for an instance by `id` or element (checks the `base` property).
`getOrCreate(id or elem, options)`	`instance`	Searches for an instance by `id` or element (checks the `base` property), if not found, creates a new instance with specified options.

Properties

Name	Type	Description
`id`	`String`	The `id` of the `base` / `collapse` element.
`isInit`	`Boolean`	Indicates whether the instance is already initialized.
`opts`	`Object`	Contains the currently applied options for the current breakpoint.
`baseOpts`	`Object`	Contains all options, including the `breakpoints` option.
`base, collapse`	`Element`	All 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`.
`isOpen`	`Boolean`	Indicates whether the collapse is currently shown.
`initialPlaceNode`	`Node`	Reference to the node that is located where the `collapse` element was at the moment of initialization.

Class properties

Name	Type	Description
`Default`	`Object`	Contains the default options for all instances.
`instances`	`Map`	A `Map` that contains all instances of the `Collapse` class.

Events

Name	Arguments	Description
`beforeInit`	`instance`	Event will fired right before initialization.
`init`	`instance`	Fires when initialization has been completed.
`beforeShow`	`instance, {trigger, event}`	Fires immediately when the `show()` method is called.
`show`	`instance, {trigger, event}`	Fires when the element becomes visible, but the CSS transition hasn’t started yet.
`shown`	`instance, {trigger, event}`	Fires when the CSS transition hasn’t been completed.
`beforeHide`	`instance, {trigger, event}`	Fires immediately when the `hide()` method is called.
`hide`	`instance, {trigger, event}`	Fires just before the CSS transition starts.
`hidden`	`instance, {trigger, event}`	Fires when the CSS transition has been completed.
`beforeDestroy`	`instance`	Fires before the instance is destroyed.
`destroy`	`instance`	Fires immediately when the `destroy()` method is called.
`breakpoint`	`instance, breakpoint, prevBreakpoint`	Fires when the breakpoint has been changed.
`any`	`eventName, instance`	Fires on any event occurrence. The first argument contains the name of the event.