TailNG

Playground

Light

Accordion

Group behavior for expansion panels: single vs multiple open, collapsible control, and klass hooks.

Open indexes: []

Only one panel stays open at a time (default).

Opening this closes the others.

This is classic accordion behavior.

Open indexes: []

Multiple panels can be open at the same time.

Useful for settings panels / sidebars.

This mode behaves like collapsible sections.

Open indexes:

[
  2
]

You cannot close the last open panel in this mode.

Switching panels is allowed, but at least one remains open.

Disabled + open is respected by the panel; accordion won’t force-toggle it.

Accordion itself is headless; panels control the visuals via klass inputs.

Works for settings pages, FAQs, sidebars.

This panel uses custom plus/minus toggle icons on the right.

This panel uses custom chevron up/down icons for toggle state.

No tngExpansionIconOpen/tngExpansionIconClose provided -> default chevron SVG is rendered.