Collapse

A content area which can be collapsed and expanded.
Import

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.

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.

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.

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 content

This is panel header 3 content

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.

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

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.

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

Collapse is nested inside the Collapse.

      Loading...
    
This is panel header 1

This is panel header 1 content

This is panel header 2 content

This is panel header 3 content

A borderless style of Collapse.

      Loading...
    
This is panel header 1

This is panel header 1 content

This is panel header 2 content

This is panel header 3 content

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.

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.

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.

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.

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

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.

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.

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.

Making collapse's background to transparent.

      Loading...
    

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.

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.

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.

Specify the trigger area of collapsible by nzCollapsible.

      Loading...
    

API#

nz-collapse#

PropertyDescriptionTypeDefaultGlobal Config
[nzAccordion]Accordion modebooleanfalse
[nzBordered]Set border stylebooleantrue
[nzGhost]Make the collapse borderless and its background transparentbooleanfalse
[nzExpandIconPosition]Set expand icon position'start' | 'end''start'-
[nzSize]Set size of collapse'small' | 'large''middle'-

nz-collapse-panel#

PropertyDescriptionTypeDefaultGlobal Config
[nzDisabled]If true, panel cannot be opened or closedbooleanfalse-
[nzHeader]Title of the panelstring | TemplateRef<void>--
[nzExpandedIcon]Customize an icon for togglestring | TemplateRef<void>--
[nzExtra]Extra element in the cornerstring | TemplateRef<void>--
[nzShowArrow]Display arrow or notbooleantrue
[nzActive]Active status of panel, double bindingboolean--
[nzCollapsible]Set collapsible trigger area'header' | 'icon' | 'disabled'--
(nzActiveChange)Callback function of the active statusEventEmitter<boolean>--