1. Plugins
  2. Collapse

Plugins

Tailwind CSS Collapse

Toggle the visibility of content.

Image Description

Installation

To get started, install Collapse plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/collapse
                      
                    

Example

Click the buttons below to show and hide another element:

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <button type="button" class="hs-collapse-toggle" id="hs-unstyled-collapse" data-hs-collapse="#hs-unstyled-collapse-heading">
                          Collapse
                        </button>
                        <div id="hs-unstyled-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-collapse">
                          This is a collapse body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
                        </div>
                      
                    

Options

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

Classes

Name Description
hs-collapse Collapse container
hs-collapse-open Collapse open
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.
hide.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) => {...})
                      
                    

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Collapses