Tailwind CSS Collapse

Toggle the visibility of content.

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:

                          
                            <button type="button" class="hs-collapse-toggle py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="hs-basic-collapse" data-hs-collapse="#hs-basic-collapse-heading">
                              Collapse
                              <svg class="hs-collapse-open:rotate-180 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                            </button>
                            <div id="hs-basic-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-collapse">
                              <div class="mt-5 bg-white rounded-lg py-3 px-4 dark:bg-slate-900">
                                <p class="text-gray-500 dark:text-gray-400">
                                  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.
                                </p>
                              </div>
                            </div>

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>

JavaScript behavior

Options

Name	Description	Options	Default value
`data-hs-collapse`	Collapse container. Valid selector.	string	`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
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.

Open item (public method).

                      
                        const collapse = new HSCollapse(document.querySelector('#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('#collapse');
                        });

Open item (mixed).

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

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

Events

Method	Description
`on:open`	Called when any item is opened.
`on:hide`	Called when any item is closed.

Open any item event example.

                      
                        const el = HSCollapse.getInstance('#collapse');

                        el.on('open', (el) => {...});

Demo examples

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

Check out Preline UI Collapses

Tailwind CSS Collapse

On this page