• components
  • Accordion

components

Tailwind CSS Accordion

Utilize the accordion feature to reveal concealed content by toggling the collapse and expand states of its child elements, employing data attribute options.

Require FlyonUI JS
Class Name
Type
Description
accordionComponentContainer class for an accordion group.
accordion-itemComponentContainer class for a single accordion.
accordion-toggleComponentClass for accordion button.
accordion-contentComponentAccordion content class.
accordion-borderedModifierApply Bordered style.
accordion-shadowModifierApply shadow style.
accordion-item-active:{tw-utility-class}ModifierApply tailwind classes when the accordion item is active.
activeModifierActive accordion item.

Basic example

Default

Basic accordion example.

Always open

To ensure that accordion items remain open even when another item is opened, set the data-accordion-always-open attribute as shown below.

Content advanced style

Active bordered

Active content will display with a border. You can use the accordion-item-active:{tw-utility-class} to define the style for an accordion item when it is active, using Tailwind classes.

Shadow accordion

Apply the accordion-shadow modifier class alongside the accordion component class to add a shadow effect to all accordion-item elements.

To modify the shadow color for active items, use the accordion-item-active: modifier.

Popout accordion

You can improve the visual presentation of the accordion item when it’s active by adding the accordion-item-active class. For example, you could modify its size to create a noticeable distinction when it’s in the active state.

Illustrations

Nested accordion

A simple accordion layout featuring a submenu.

With arrow

A simple accordion design that includes an arrow.

With Avatar

The below example is the accordion with avatar.

Arrow on right side

A simple accordion setup with an arrow positioned on the right side.

Icon

An accordion featuring an icon on the left and an arrow on the right.

Without plus

A version without an Plus.

Bordered accordion

A basic form of the bordered accordion. Use the accordion-bordered class to add a border to the accordion.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-accordion-always-openMakes accordion items stay open when another item is opened.booleanfalse

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.

Method usage

Below, we demonstrate how to use the public methods. Assign an ID to the accordion-item as shown. To test the other methods, copy the provided code into your console and click the button.

Open item (public method).

// This method is used in above example.
const accordion = new HSAccordion(document.querySelector('#payment-method'));
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('#payment-method');
});

Open item (mixed).

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

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

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:openFires after the accordion is opened.Current accordion element.
on:closeFires after accordion is closed.Current accordion element.

Event usage

Just like in the methods section, assign an ID to the accordion-item in events. Click on the accordion, and observe the console output.

Open any accordion event example.

const { element } = HSAccordion.getInstance('#payment-event', true)

element.on('open', (instance) => {console.log("open")});
element.on('close', (instance) => {console.log("close")});