cpn-basic-collapse

To group content into expandable sections in a React UI, wrap your content with the UDesign Collapse and Collapse.Panel components to create toggleable, space-efficient interfaces.

Control visibility for collapsible panels by configuring the defaultOpenKeys property on the Collapse component, which determines which panels remain expanded by default upon initial render.

Handle toggle state changes in a Collapse component by attaching an onChange callback function, which captures the active panel keys whenever a user expands or collapses a section during interaction.

No, you do not need external libraries to create collapsible panels in UDesign; the framework provides safe, built-in guidance using Collapse and Collapse.Panel without requiring additional dependencies.

The best way to document component demos with expandable sections is using the UDesign Collapse component to organize content, demonstrating proper usage of defaultOpenKeys and onChange callbacks in examples.