Tailwind CSS Accordion

Build vertically collapsing accordions in combination with Accordion JavaScript plugin.

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.

It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.

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>

JavaScript behavior

Options

Parameters	Description	Options	Default value
`data-hs-accordion-always-open`	Makes accordion items stay open when another item is opened	boolean	`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
Public methods
`show()`	Open collapsed item.
`hide()`	Collapse item.
Static methods
`HSAccordion.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`
`HSAccordion.show(target)`	Open collapsed item. `target` should be a Node
`HSAccordion.hide(target)`	Collapse item. `target` should be a Node

Open item (public method).

                      
                        const accordion = new HSAccordion(document.querySelector('#accordion'));
                        const showBtn = document.querySelector('#show-btn');

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

Open item (static method).

                      
                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {
                          HSAccordion.show('#accordion');
                        });

Open item (mixed).

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

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

Events

Method	Description	Returning value
`on:open`	Fires after the accordion was opened	Current accordion element
`on:close`	Fires after accordion was closed	Current accordion element

When item opens event example.

                      
                        const el = HSAccordion.getInstance('#accordion');

                        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 Dismiss

Tailwind CSS Accordion

On this page