1. Plugins
  3. Accordion

Plugins

Tailwind CSS Accordion

Build vertically collapsing accordions in combination with Accordion JavaScript plugin.

Image Description

Installation

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

                      
                        npm i @preline/accordion

Example

Click the accordions below to expand/collapse the accordion content.

Copy

Basic usage

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

                      
                        <div class="hs-accordion-group">
                          <div class="hs-accordion active" id="hs-unstyled-heading-one">
                            <button class="hs-accordion-toggle" aria-controls="hs-unstyled-collapse-one">
                              Accordion #1
                            </button>
                            <div id="hs-unstyled-collapse-one" class="hs-accordion-content overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-heading-one">
                              It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
                            </div>
                          </div>

                          <div class="hs-accordion" id="hs-unstyled-heading-two">
                            <button class="hs-accordion-toggle" aria-controls="hs-unstyled-collapse-two">
                              Accordion #2
                            </button>
                            <div id="hs-unstyled-collapse-two" class="hs-accordion-content hidden overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-heading-two">
                              It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
                            </div>
                          </div>

                          <div class="hs-accordion" id="hs-unstyled-heading-three">
                            <button class="hs-accordion-toggle" aria-controls="hs-unstyled-collapse-three">
                              Accordion #3
                            </button>
                            <div id="hs-unstyled-collapse-three" class="hs-accordion-content hidden overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-heading-three">
                              It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
                            </div>
                          </div>
                        </div>

Options

Parameters Description Options Default value
data-hs-accordion-always-open Makes accordion items stay open when another item is opened. false | true false

Classes

Name Description
hs-accordion-group Container class for an accordion group
hs-accordion Accordion container
hs-accordion-toggle Accordion toggle
hs-accordion-content Accordion content

Methods

The HSAccordion object is contained within the global window object

Method Description
HSAccordion.show($accordionEl) Open collapsed item
HSAccordion.hide($accordionEl) Collapse item

Events

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

Open any item event example.

                      
                        window.addEventListener('open.hs.accordion', ($accordionEl) => {...})

                        // OR

                        HSAccordion.on('open', ($accordionEl) => {...})

Open specific item event example.

                      
                        $accordionEl.addEventListener('open.hs.accordion', (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 Accordions