• 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.
accordion-treeview-rootComponentIf the accordion is placed in a container with this class, the treeview mode is automatically activated.
accordion-headingComponentContainer class specifically for child elements within accordion-item for treeview.
accordion-selectableComponentIf the treeview mode is activated, then elements with this class will act as elements that can be selected.
accordion-selected:{tw-utility-class}ModifierModifier applying Tailwind utility styles.
tree-view-spaceModifierStyle space and border for sub-menu in treeview.

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.

Destroy/Reinitialize

new

The destroy method is provided to facilitate the destruction of a accordion element.

Tree View

Use the accordion-treeview-root class to initialize the container as a TreeView component, automatically activating the treeview mode when used within a treeview container.

Within each tree item, use the accordion-heading class as a container for child elements inside each accordion-item, organizing them hierarchically under parent items in the TreeView.

To make items selectable, apply the accordion-selectable class to elements within the TreeView. This enables interactive selection behavior for each item.

The accordion-selected:{tw-utility-class} modifier can be used to style selected items, allowing you to apply Tailwind utility classes that highlight or otherwise visually indicate the selected state.

For styling nested menus within the TreeView, add the tree-view-space modifier. This class adds appropriate spacing and border styles to submenus, enhancing readability and distinction between parent and child elements.

Basic

new

Example of a basic Tree View to expand and collapse tree view nodes. You can change icon, text as per your needs.

Close Active Element

new

Remove the data-accordion-always-open attribute to close the currently open element at the group level.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
Data Options
data-accordion-always-openMakes accordion items stay open when another item is opened.booleanfalse
Class Options
[--stop-propagation:*]Halts event processing when the toggle button is clicked, which can be beneficial in certain scenarios"true" / "false""false"

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.

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();
});

Destroy instance

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

destroyBtn.addEventListener('click', () => {
  element.destroy()
});

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")});