Borderless

Custom Panel

No arrow

Extra Node

Ghost Collapse

Collapsible

API

Collapse

A content area which can be collapsed and expanded.

Import

Source

components/collapse

Docs

Edit this page

When To Use#

Can be used to group or hide complex regions to keep the page clean.
Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

Examples

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 3

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Collapse

More than one panel can be expanded at a time, the first panel is initialized to be active in this case.

      Loading...

This is panel header 1

This is panel header 1 content

This is panel header 2

This is panel header 2 content

This is panel header 3

This is panel header 3 content

Accordion

Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.

      Loading...

This is the default panel size

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is the small panel size

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is the large panel size

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Size

Set the size of the collapse. If a large or small collapse is desired, set the nzSize property to either large or small respectively. Omit the nzSize property for a collapse with the default size.

      Loading...

This is panel header 1

This is panel header 1-1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 1-2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

This is panel header 3

Nested panel

Collapse is nested inside the Collapse.

      Loading...

This is panel header 1

This is panel header 1 content

This is panel header 2

This is panel header 2 content

This is panel header 3

This is panel header 3 content

Borderless

A borderless style of Collapse.

      Loading...

This is panel header 1

This is panel header 1 content

This is panel header 2

This is panel header 2 content

This is panel header 3

This is panel header 3 content

Custom Panel

Customize the background, border, margin and icon styles for each panel.

      Loading...

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

No arrow

You can disable showing arrow icon by passing [nzShowArrow]="false" to nz-collapse-panel component.

      Loading...

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 3

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Expand Icon Position:

start

Extra Node

You can use nzExtra to put extra elements in the top right corner.

      Loading...

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 3

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Ghost Collapse

Making collapse's background to transparent.

      Loading...

This is panel with header collapsible

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel with icon collapsible

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel with disabled collapsible

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Collapsible

Specify the trigger area of collapsible by nzCollapsible.

      Loading...

API#

nz-collapsecomponent#

Property	Description	Type	Default	Global Config
`[nzAccordion]`	Accordion mode	`boolean`	`false`	✅
`[nzBordered]`	Set border style	`boolean`	`true`	✅
`[nzGhost]`	Make the collapse borderless and its background transparent	`boolean`	`false`	✅
`[nzExpandIconPosition]`	Set expand icon position	`'start' \| 'end'`	`'start'`	-
`[nzSize]`	Set size of collapse	`'small' \| 'large'`	`'middle'`	-

nz-collapse-panelcomponent#

Property	Description	Type	Default	Global Config
`[nzDisabled]`	If `true`, panel cannot be opened or closed	`boolean`	`false`	-
`[nzHeader]`	Title of the panel	`string \| TemplateRef<void>`	-	-
`[nzExpandedIcon]`	Customize an icon for toggle	`string \| TemplateRef<void>`	-	-
`[nzExtra]`	Extra element in the corner	`string \| TemplateRef<void>`	-	-
`[nzShowArrow]`	Display arrow or not	`boolean`	`true`	✅
`[nzActive]`	Active status of panel, double binding	`boolean`	-	-
`[nzCollapsible]`	Set collapsible trigger area	`'header' \| 'icon' \| 'disabled'`	-	-
`(nzActiveChange)`	Callback function of the active status	`EventEmitter<boolean>`	-	-