Collapsible

Description

A component that provides a header which a user can interact with to toggle the visibility of its respective collapsible body/content.

Properties

| Property | Property description | Property type | Is required | | :----------- | :--------------------------------------------------------------------: | :---------------: | :---------: | | id | Unique ID | string | [x] | | children | Content | ReactNode[] | [x] | | isOpen | Toggle the starting visibility of body content | boolean | | | isDisabled | Toggle the ability to show/hide body content | boolean | | | onClick | Callback function run against the Unique ID when the header is clicked | function | | | className | Overwrite ClassName | classNameOverride | |

Collapsible Header

Properties

| Property | Property description | Property type | Is required | | :----------- | :------------------------: | :---------------: | :---------: | | children | Header Content | ReactNode[] | [x] | | titleLevel | Heading Level to use (1–6) | string | | | className | Overwrite ClassName | classNameOverride | |

Collapsible Body

Properties

| Property | Property description | Property type | Is required | | :----------------- | :-----------------------------------------------------: | :---------------: | :---------: | | children | Body Content | ReactNode[] | [x] | | transitionLength | Duration of the open/close transition (in milliseconds) | number | | | className | Overwrite ClassName | classNameOverride | |

Usage

import { Collapsible, CollapsibleHeader, CollapsibleBody } from '@squiz/xaccel-collapsible';

<Collapsible id="12345" isOpen="true" isDisabled="false" onClick={() => { /* ... */ }}>
    <CollapsibleHeader titleLevel="h3">Header</CollapsibleHeader>
    <CollapsibleBody transitionLength={250}>TestBody</CollapsibleBody>
</Collapsible>

For more information about className please visit packages/utility/functions/src/generateClasses.js