Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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.

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.

Expansion Panel as Accordion

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

Personal data Type your name and age