1. Docs
  2. Collapse

Collapse Component

Display collapsible panels that can be toggled.

Installation

To get started, install the @flexilla/collapse package. You can skip this step if you’ve already installed the full @flexilla/flexilla package.

Structure

Collapse Structure

  • Collapse: The main container for collapsible content.
  • Trigger (optional): An element used to toggle the collapse.
It’s important to set some attributes and default styles to make the collapse work correctly. You can follow the provided example.

Example

icon - html index.html (html)

Initializing the Component

Import the Collapse component and initialize it with the desired options. 
import { Collapse } from '@flexilla/collapse';

const collapse = new Collapse(
  "#collapse1",
  {
    // options here
  }
);

Multi-Trigger

You can use one trigger to control multiple collapse elements.
icon - html index.html (html)

Close height

You can define a closed height 
<div data-collapsible-example data-close-height="80" ...>
  ...
</div>

Attributes

Flexilla uses data-attributes to manage state. Each time an action is triggered, the targeted element updates its data-attribute.

Data State: data-state

The data-state attribute stores the state of each item and is applied to the collapsible element. This can be useful for targeting specific states with CSS.
  • open: Indicates that the content is fully expanded.
  • close: Indicates that the content height or width is set to 0.

Aria Expanded: aria-expanded

This attribute is applied to the trigger element, with values of true or false to indicate whether the content is expanded or collapsed.

Props/Params & Options

Params

collapse
HTMLElement|string
Collapse container, which must be a valid selector or HTMLElement.
options
CollapseOptions
An options object to configure the collapse behavior.
trigger (optional)
HTMLElement|string
The trigger element used to toggle the collapse. Must be a valid selector or HTMLElement.

With JavaScript

const collapse = new Collapse("#collapse1", {
  // options here
});

With TypeScript

import type { CollapseOptions } from "@flexilla/collapse";

const options: CollapseOptions = {
  // options here
};

new Collapse("#collapse1", options);
If you want to manually specify a trigger, pass its selector like this: 
new Collapse("#collapse1", options, "#collapseTriggerSelector");

Options

You can also pass options via data-attributes. View examples here to learn how. 
const options = {
  onToggle({ isExpanded }) {
    // Do something with the `isExpanded` state
  },
};
onToggle
method
A callback function that returns the state of the collapse element. The isExpanded property indicates whether the element is expanded or collapsed.

Methods

Show/Expand

You can manually show the collapse content. 
import { Collapse } from "@flexilla/collapse";

const myCollapse = new Collapse("#collapse1");

myCollapse.show();

Hide

You can manually hide the collapse content. 
myCollapse.hide();

Toggle

Toggle the collapse element between showing and hiding. 
myCollapse.toggle();

Auto Init

The autoInit method initializes all collapse elements. This method accepts a string to identify the elements (using a class name or data attribute). By default, it uses [data-fx-collapse]. 
import { Collapse } from "@flexilla/collapse";

Collapse.autoInit();  // Initializes collapse components using `data-fx-collapse`
// or
Collapse.autoInit(".collapse-item");