You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Collapsible

A collapsible allows users to hide or display a section of content.

View source

Q: Why can't you trust an atom?

1
import {CollapsibleConnected} from '@coveord/plasma-react';
2

3
export default () => (
4
    <CollapsibleConnected
5
        id="collapsible-example-1"
6
        headerContent={<h6 className="p2">Q: Why can't you trust an atom?</h6>}
7
    >
8
        <div className="p2">A: Because they make up everything</div>
9
    </CollapsibleConnected>
10
);

Props

Name	Type	Default	Description
`id`required	`string`		Unique identifier for the Collapsible
`actions`	`IActionOptions[]`
`addedSelectedOption`	`IDropdownOption`
`attributeToFormat`	`string`
`attributeToSort`	`string`
`calendarId`	`string`
`children`	`ReactNode`
`className`	`string`		Additionnal CSS classes for the outer most container of the Collapsible
`collapsibleToggleIcon`	`ReactNode`		Set to render a custom toggle icon
`color`	`string`
`currentOption`	`number`
`date`	`Date`
`disabled`	`boolean`	`false`	Whether the collapsible is disabled
`disabledValues`	`string[]`
`expanded`	`boolean`
`expandedOnMount`	`boolean`	`false`	Whether the collapsible is expanded on mount
`facet`	`string`
`facetRow`	`IFacet`
`filterText`	`string`
`headerClasses`	`string`		Additionnal CSS classes for the header
`headerContent`	`ReactNode`		Custom JSX inside the header
`ids`	`string[]`
`initialPerPage`	`number`
`initialTableData`	`ITableData`
`isCollapsible`	`boolean`
`isDirty`	`boolean`
`isInError`	`boolean`
`isOpen`	`boolean`
`isRange`	`boolean`
`isSelected`	`boolean`
`item`	`string`
`label`	`string`
`limit`	`string`
`onClick`	`() => void`		Callback called when container is clicked
`options`	`IInlinePromptOptions`
`pageNb`	`number`
`perPage`	`number`
`predicates`	`ITablePredicate[]`
`searching`	`boolean`
`selected`	`string`
`shouldResetPage`	`boolean`
`tableId`	`string`
`tableStateModifier`	`ITableStateModifier`
`toggleIconClassName`	`string`		Additionnal CSS classes for the toggle icon
`totalEntries`	`number`
`totalPages`	`number`
`valid`	`boolean`
`value`	`string`
`withBorders`	`boolean`	`false`	Whether the collapsible has borders
`yPosition`	`number`

Examples

Info box wrapper

Lean more about collapsible info boxes.

1
import {CollapsibleInfoBox} from '@coveord/plasma-react';
2

3
export default () => (
4
    <CollapsibleInfoBox id="collapsible-info-box-example-1" title="Lean more about collapsible info boxes.">
5
        By default, this component will render with an info icon
6
    </CollapsibleInfoBox>
7
);

Expanded on mount

Collapsible Container expanded on mount

I am expanded on mount!

1
import {CollapsibleContainerConnected} from '@coveord/plasma-react';
2

3
export default () => (
4
    <CollapsibleContainerConnected
5
        id="collapsible-container-example-1"
6
        title="Collapsible Container expanded on mount"
7
        informationUrl="https://www.coveo.com/en"
8
        informationTooltip={{
9
            title: "I display information and if you click me you'll be led to a URL that was provided to me.",
10
        }}
11
        expandedOnMount
12
    >
13
        I am expanded on mount!
14
    </CollapsibleContainerConnected>
15
);

Disabled

Collapsible Container disabled

1
import {CollapsibleContainerConnected} from '@coveord/plasma-react';
2

3
export default () => (
4
    <CollapsibleContainerConnected
5
        id="collapsible-container-example-3"
6
        title="Collapsible Container disabled"
7
        informationUrl="https://www.coveo.com/en"
8
        informationTooltip={{
9
            title: "I display information and if you click me you'll be led to a URL that was provided to me.",
10
        }}
11
        disabled
12
    >
13
        something!
14
    </CollapsibleContainerConnected>
15
);

No guidelines exist for CollapsibleConnected yet.

Create guidelines