Tailwind CSS Accordion Plugin API

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.

1. Install the plugin

   Install @preline/accordion via npm

   Terminal

                             
                               npm i @preline/accordion
                             
                           

2. Add the plugin CSS

   Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
                               
                               /* @preline/accordion */
                               /* [!code highlight:3] */
                               @source "../node_modules/@preline/accordion/*.js";
                               @import "./node_modules/@preline/accordion/variants.css";
                               @import "./node_modules/@preline/accordion/theme.css";
                             
                           

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/@preline/accordion/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import HSAccordion from "@preline/accordion/non-auto.mjs"; new HSAccordion(document.querySelector("#accordion")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

   JavaScript (auto)

                             
                               import "@preline/accordion";
                             
                           

   JavaScript (non-auto)

                             
                               import HSAccordion from "@preline/accordion/non-auto";
                               
                               HSAccordion.autoInit();
                               
                               // Or initialize a specific element manually
                               const el = document.querySelector("#accordion");
                               if (el) new HSAccordion(el);
                             
                           

Example

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

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>
                      
                    

Classes Options

Selectors

Methods

The HSAccordion object is contained within the global window object

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

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

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

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

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

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

Events

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

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

Ready to use Components

Accordion

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Accordion examples