1. Components
  2. Accordion

Components

Tailwind CSS Accordion - Preline UI

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Requires JS

Basic usage

Example

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

This is the third item's accordion 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.

Always open

Make accordion items stay open when another item is opened.

This is the third item's accordion 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.

Nested

A basic form of the accordion with sub menu.

This is the third item's accordion 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.

No arrow

Example with no arrow.

This is the third item's accordion 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.

With arrow

A basic form of the accordion with arrow.

This is the third item's accordion 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.

With title and arrow stretched

A basic form of the accordion with title and arrow stretched.

This is the third item's accordion 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.

Bordered

A basic form of the bordered accordion.

This is the third item's accordion 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.

JavaScript behavior

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) => {...})