1. Plugins
  2. Accordion

Plugins

Tailwind CSS Accordion

Build vertically collapsing accordions in combination with Accordion JavaScript plugin.

Accordion

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-expanded="true" 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" role="region" 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-expanded="false" 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" role="region" 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-expanded="false" 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" role="region" 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

Data Options

Parameters Description Options Default value
data-hs-accordion-always-open Makes accordion items stay open when another item is opened. Should be added to the hs-accordion-group. boolean false

Classes Options

Name Description Options Default value
[--stop-propagation:*] Interrupts event processing when a toggle button is clicked. This can be useful in some cases. "true" | "false" "false"
[--keep-one-open:*] Ensures at least one accordion item remains open at all times. Should be added to the hs-accordion-group. "true" | "false" "false"

Selectors

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.
hs-accordion-treeview-root If the accordion is placed in a container with this class, the treeview mode is automatically activated.
hs-accordion-selectable If the treeview mode is activated, then elements with this class will act as elements that can be selected.

Methods

The HSAccordion object is contained within the global window object

Method Description
Public methods
show() Open collapsed item.
hide() Collapse item.
destroy() Destroys the instance, removes generated markup (if any), removes added classes and attributes.
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:beforeOpen Fires before the accordion was opened Current accordion element
on:close Fires after accordion was closed Current accordion element
on:beforeClose Fires before the accordion was closed Current accordion element

When item opens event example.

                      
                        const { element } = HSAccordion.getInstance('#accordion', true);

                        element.on('open', () => {
                          console.log('Opened!');
                        });
                  
                        element.on('close', () => {
                          console.log('Closed!');
                        });

Demo examples

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

Plugins UI Mockups
Check out Preline UI Components