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.

Example

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci

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.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci

Close height

You can define closed height

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi non ea mollitia odio, iure adipisci 

<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");