ng tailng
GitHub

Overview

tng-accordion groups tng-expansion-panel children and enforces single-open (accordion) or multiple-open behavior. Use multiple to allow several panels open at once, collapsible to allow closing the last open panel, and autoOpenFirst to open the first panel on init. openIndexesChange emits the list of open panel indexes. Class hooks: rootKlass, stackKlass.

Quick example

Basic (single open)
HTMLTSCSS

<tng-accordion>
  <tng-expansion-panel>
    <div tngExpansionTitle>Panel A</div>
    <div tngExpansionContent>...</div>
  </tng-expansion-panel>
  <tng-expansion-panel>
    <div tngExpansionTitle>Panel B</div>
    <div tngExpansionContent>...</div>
  </tng-expansion-panel>
</tng-accordion>
Only one panel stays open at a time.
Opening this closes the others.
Classic accordion behavior.

Features

Single vs multiple

Default: only one panel open. Set multiple to true for collapsible sections (multiple open).

Collapsible

When false, at least one panel stays open. Use with autoOpenFirst to guarantee one open on load.

Class hooks

rootKlass, stackKlass. Panel visuals come from each tng-expansion-panel klass inputs.