ComponentsNavigation

Accordion

A list of collapsible sections in a bordered box — FAQ blocks, grouped details, long settings. Build it from panels, or pass an array of items with header and content templates.

Features10APIThemingAccessibility

Basic

Each tx-accordion-panel has a value, a tx-accordion-header and a tx-accordion-content. [(value)] holds the open panels; several can be open at once.

Most resolvers pick up a change within an hour; some keep the old record up to two days.
Thirty days before it expires. You get an email if the renewal fails.
Yes — start a transfer from the domain settings and confirm it from the other account.

Open: dns

Items

items renders a panel per item: header, content, tone, disabled and any fields of your own. The value of an item is its value or its index. opened / closed report the panel the user toggled.

Orders leave the warehouse within two working days.
Return any item within 30 days for a full refund.
Two years on every device, one year on accessories.

Open a section

Templates

ng-template txAccordionHeader and ng-template txAccordionContent draw each item; they get the item, its index and whether it is open. The content template is created on the first open.

Region
Frankfurt
CPU
2 vCPU

Single

[multiple]="false" keeps one panel open: opening another closes the first. The value is then a single value or null.

Sign up with your work email.
Add people by email; they get a link to join.
Pick a template or start from an empty project.

Open: account

Tones

tone (info, success, warn, danger) draws a coloured bar on the left of the header.

All records point to the right servers.
Expires in 12 days — renew it soon.
Two rules point to pages that no longer exist.
Static files are cached for one week.

Disabled

A disabled panel cannot be opened and the arrow keys skip it.

Team plan, billed yearly.
Connect your identity provider.
Every change in the last 90 days.

Icons

expandIcon / collapseIcon replace the chevron (one of them is used for both states when only one is set); ng-template txAccordionToggleIcon draws your own icon from the open state.

Visible to everyone with the link.
Visible to your team only.
Visible to everyone with the link.
Visible to your team only.

Lazy

Content in an ng-template txAccordionContent inside tx-accordion-content is created on the first open and kept afterwards — load heavy sections only when someone opens them.

Keyboard

Up and Down move between headers, Home / End jump to the first / last, Enter or Space toggles. With selectOnFocus the arrow keys open the header they land on.

Planning, 10:00.
Design review, 14:00.
Demo, 16:00.

Design tokens

dt changes one accordion — here roomier headers and a tinted content area.

Hosting, backups and email support.
Yes, the plan stays active until the end of the period.

An Angular UI kit that feels finished. Open source under the MIT license.