1. Components
  2. Collapse

Components

Tailwind CSS Collapse - Preline UI

Toggle the visibility of content across your project with a few classes and our JavaScript plugin.

Requires JS

Basic usage

Example

Click the buttons below to show and hide another element:

JavaScript behavior

Options

Parameters Description Options Default value
data-hs-collapse Selector collapse container Selector null

Classes

Name Description
hs-collapse Collapse container
hs-collapse-toggle Collapse toggle

Methods

The HSCollapse object is contained within the global window object

Method Description
HSCollapse.show($collapseEl) Open collapsed item
HSCollapse.hide($collapseEl) Collapse item

Events

Method Description
open.hs.collapse Called when any item is opened.
close.hs.collapse Called when any item is closed.

Open any item event example.

                  
                    window.addEventListener('open.hs.collapse', ($collapseEl) => {...})

                    // OR

                    HSCollapse.on('open', ($collapseEl) => {...})
                  
                

Open specific item event example.

                  
                    $collapseEl.addEventListener('open.hs.collapse', (evt) => {...})