Collapse

Collapse, A content area which can be collapsed and expanded. Can be used to group or hide complex regions to keep the page clean.

To utilize the Collapse component, import it from @vivakits/react-components.

import { VKCollapse } from "@vivakits/react-components";

An example of a Collapse with values.

This is panel header 1

This is panel header 2

This is panel header 3

You can open all tabs by passing openAll to VKCollapse component.

This is panel header 1

A dog is a type of domesticated animal.

This is panel header 2

Known for its loyalty and faithfulness.

This is panel header 3

it can be found as a welcome guest in many households across the world.

You can handle different sizes collapse by set size property to 'sm' 'md' 'lg' 'xl' to VKCollapse component.

Small

This is panel header 1

Medium

This is panel header 1

Large

This is panel header 1

Extra Large

This is panel header 1

An example of a Collapse with accordion mode. In accordion mode, only one panel can be expanded at a time.

This is panel header 1

This is panel header 2

This is panel header 3

You can hide arrow by passing hideArrow={true} to VKCollapse component.

This is panel header 1

This is panel header 2

This is panel header 3

An example of catch event while panel change.

This is panel header 1

This is panel header 2

This is panel header 3

Attribute	Type	Description	Default
accordionMode	boolean	If true, Collapse renders as Accordion. In accordion mode, only one panel can be expanded at a time.	false
activeTab	string	Key of the active panel	-
openAll	boolean	Allow to open all tab initially	false
destroyInactivePanel	boolean	Destroy Inactive Panel from DOM	false
hideArrow	boolean	Allow to hide collapse icon	false
expandIcon	ReactNode	Allow to customize collapse icon	-
size	smmdlgxl	Set the size of collapse	md
onChange	function	Callback function executed when active panel is changed	-
items	`[{ key: string, label: string, children: ReactNode }]`	collapse items content	-
collapseContainerClassName	string	Optional. Custom class name for collapse container.	-
collapseSectionClassName	string	Optional. Custom class name for collapse section.	-
collapseHeadingClassName	string	Optional. Custom class name for collapse Heading text.	-
collapseItemContainerClassName	string	Optional. Custom class name for collapse's item container.	-
collapseItemContentClassName	string	Optional. Custom class name for collapse's item content.	-