Components

Accordion

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

Basic example

Default

Basic accordion example.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

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.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

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.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Shadow accordion

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

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

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.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Illustrations

Nested accordion

A simple accordion layout featuring a submenu.

We accept Visa®, MasterCard®, American Express®, and PayPal®. Our servers encrypt all information submitted to them, so you can be confident that your credit card information will be kept safe and secure.

With arrow

A simple accordion design that includes an arrow.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

With Avatar

The below example is the accordion with avatar.

Richard Payne is a remarkable individual known for his exceptional skills and expertise in various fields. With a strong background in technology and a passion for innovation, Richard has made significant contributions to the industry.

Arrow on right side

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

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Icon

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

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Without plus

A version without an Plus.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Bordered accordion

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

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a accordion element.

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

Tree View — Basic

Info: The following `treeview` example is created using the accordion plugin. For a fully functional `treeview` component, please refer to the Tree View plugin documentation for comprehensive details.

assets
css
main
main.css
docs.css
README.txt
.gitignore
img

Tree View — Close Active Element

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

assets
css
main
main.css
docs.css
README.txt
.gitignore

JavaScript behavior

Methods — Method usage

The `HSAccordion` object is contained within the global `window` object.

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

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

Events — Event usage

METHOD| DESCRIPTION | RETURNING VALUE `on:open`|Fires after the accordion is opened. | Current accordion element. `on:beforeOpen` | Fires before the accordion was opened. | Current accordion element. `on:close`|Fires after accordion is closed. | Current accordion element. `on:beforeClose` | Fires before the accordion was closed. | Current accordion element.

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

element.on('open', (instance) => {console.log("open")});
element.on('close', (instance) => {console.log("close")});
Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
accordioncomponentContainer class for an accordion group.
accordion-treeview-rootcomponentIf the accordion is placed in a container with this class, the `treeview` mode is automatically activated.
accordion-itempartContainer class for a single accordion.
accordion-togglepartClass for accordion button.
accordion-contentpartAccordion content class.
accordion-headingpartContainer class specifically for child elements within `accordion-item` for `treeview`.
accordion-borderedstyleApply Bordered style.
accordion-shadowstyleApply shadow style.
activestateIndicates the active state of an accordion item.
accordion-selectablemodifierIf the `treeview` mode is activated, then elements with this class will act as elements that can be selected.
tree-view-spacemodifierStyle space and border for sub-menu in `treeview`.
accordion-item-active:{tw-utility-class}variantApply tailwind classes when the accordion item is active.
accordion-selected:{tw-utility-class}variantModifier applying Tailwind utility styles.