Components

Collapse

Toggle the visibility of the content in the collapse component, allowing users to expand or collapse sections as desired.

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.

How can I track my order?

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a collapse element.

JavaScript behavior

Methods — Method usage

The `HSCollapse` object exists within the global `window` object.

JavaScript

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

destroyBtn.addEventListener('click', () => {
  element.destroy()
});

Events — Event usage

METHOD| DESCRIPTION `on:open`|Called when any item is opened. `on:hide`|Called when any item is closed.

JavaScript

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

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

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`collapse`	component	The class for the collapse container which contains content.
`collapse-toggle`	part	Class for button.
`collapse-open:{tw-utility-class}`	variant	Modifies tailwind classes when the collapse menu is open.