Collapse

A content area which can be collapsed and expanded.

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.
import { NzCollapseModule } from 'ng-zorro-antd/collapse';

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.

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      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-

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--
(nzActiveChange)Callback function of the active statusEventEmitter<boolean>--