Expansion Panel

Expansion Panel builds independent collapsible sections with a header and body. Use ngs-expansion-panel for one section, and wrap panels in ngs-accordion when a group should coordinate single or multiple open panels.

Use it for settings groups, FAQs, advanced options, filters, grouped form sections, detail sections, onboarding or setup steps, and inspector groups. Do not use it to truncate one long text block, render a tree, build tabs, force a strict stepper flow, or as a plain card/container without collapse behavior.

The NgStarter Angular Expansion component lets you group independent collapsible sections with headers and bodies. Use ngs-expansion-panel for one collapsible section and ngs-accordion for a coordinated group of panels. It includes examples for Basic Expansion Panel, Expansion Panel with expand/collapse all toggles, Expansion Panel as Accordion, and Expansion panel expand collapse toggles.

Basic Expansion Panel

Use an Expansion Panel when one section needs a clear header and collapsible body content.

This is the expansion title

This is a summary of the content

Self aware panel

Currently I am closed

Expansion Panel with expand/collapse all toggles

Use ngs-accordion multi when several panels can be open at the same time and the page needs open-all or close-all controls.

Personal data

Type your name and age

Destination

Type the country name

Day of the trip

Inform the date you wish to travel

Expansion Panel as Accordion

Use Accordion behavior when only one section should be expanded at a time.