• components
  • Collapse

components

Tailwind CSS Collapse

Change the content's visibility status.

Require FlyonUI JS
Class Name
Type
Description
collapseComponentThe class for the collapse container which contains content.
collapse-toggleComponentClass for button.
collapse-open:{tw-utility-class}ModifierModifies tailwind classes when the collapse menu is open.

Basic example

Default

This basic example of collapse component.

Illustrations

Background

The collapse container features a background color.

Dropdown

Below example show how can we use collapse inside a dropdown.

Show/Hide

Press the buttons below to toggle the visibility of another element.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-collapseCollapse the container for the given ID.stringnull

Methods

The HSCollapse object exists within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
show()Open collapsed item.
hide()
Collapse item.
STATIC METHODS
HSCollapse.getInstance(target)
Returns the element associated to the target.
  • target should be a Node or string (valid selector).
HSCollapse.show(target)Open collapsed item.
HSCollapse.hide(target)Collapse item.

Method usage

The method is triggered by the Id of the button. Below, you’ll find example of public methods. To use other methods copy a method from below and paste it into your console, then try clicking the corresponding button to see it in action.

Open item (public method).

// This method is used in above example.
const collapse = new HSCollapse(document.querySelector('#method-collapse'));
const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
collapse.show();
});

Open item (static method).

const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
HSCollapse.show('#method-collapse');
});

Open item (mixed).

const { element } = HSCollapse.getInstance('#method-collapse', true);
const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
element.show();
});

Events

METHOD
DESCRIPTION
on:openCalled when any item is opened.
on:hideCalled when any item is closed.

Event usage

The event is triggered by the ID of the button.

const { element } = HSCollapse.getInstance('#event-collapse', true)

element.on('open', (instance) => {console.log("open")});
element.on('hide', (instance) => {console.log("close")});