Collapsible - Semi Design

Show · Collapsible

Collapsible

The collapsible component is a container component used to put long sections of information under a block that can be expanded or collapsed.

When to use

Collapsibleis a behavior component with animation effect by default. It is used in various components in Semi Components, including: Navigation, Collapse, Tree, TreeSelect, and Typography.
When the above components do not meet requirements or customized collapsed behavior, you can use Collapsible to put in contents that need to be expanded or folded.

Use isOpen to control the expansion or folding of the content.

You can use duration to set animation duration or turn off animation by setting motion={false}.

You could use collapseHeight to customize collapsed height. v>=1.0.0

Properties	Instructions	type	Default	version
className	Class name	string	-	0.34.0
collapseHeight	Collapse height	number	0	1.0.0
duration	Time of animation execution	number	250	-
isOpen	Toggle whether to expand the content area	boolean	`false`	-
keepDOM	Whether to keep the hidden panel in DOM tree, destroyed by default	boolean	`false`	0.25.0
motion	Toggle whether to turn on animation	Motion	`true`	-
reCalcKey	When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.	number \| string	-	1.5.0
style	Style object	CSSProperties	-	0.34.0
aria-controls	aria-controls	string	-	2.3.0

Collapsible has id props, the value passed in will be set as the id of the wrapper element, which can be used with other components' aria-controls to indicate the control relationship, see the usage example below.

Why Collapsible does not expand as expected?
Check if the display of parent item of Collapsible once was set to none. In this case, Collapsible could not get height of node properly. If this is not the issue, contact Semi developers to see if other issues exist.