Skip to main content

Collapse Content

Simple#

Simplest collapse content have title and children.

This is title

This is children.
<>
<CollapseContent title="This is title" >
<div>This is children.</div>
</CollapseContent>
</>

Description#

Add description by description prop.

This is title

Description
This is children.
<>
<CollapseContent title="This is title" description="Description" >
<div>This is children.</div>
</CollapseContent>
</>

Image#

Add image by image prop.

This is title

heading
This is children.
<>
<CollapseContent title="This is title" image="https://erxes.io/static/images/logo/logo_dark.svg" >
<div>This is children.</div>
</CollapseContent>
</>

Image background color#

Add image background color by imageBackground prop.

This is title

heading
This is children.
<>
<CollapseContent title="This is title" image="https://erxes.io/static/images/logo/logo_dark.svg" imageBackground="yellow" >
<div>This is children.</div>
</CollapseContent>
</>

Before title#

Add something before title by beforeTitle prop.

This is title

This is children.
<>
<CollapseContent title="This is title" beforeTitle={<img src='https://erxes.io/static/images/logo/glyph_dark.png' height='40px' />} >
<div>This is children.</div>
</CollapseContent>
</>

ContendId#

Use contentId for jump to content.

This is title

This is children.
<>
<CollapseContent title="This is title" contendId="contendId" >
<div>This is children.</div>
</CollapseContent>
</>

Compact#

Set the padding of the title conteiner to '10px 20px' by adding compact prop. Default padding: 20px

This is title

This is children.
<>
<CollapseContent compact title="This is title" >
<div>This is children.</div>
</CollapseContent>
</>

Open#

Activates open function of container and collapse tag by open prop.

This is title

This is children.
<>
<CollapseContent title="This is title" open >
<div>This is children.</div>
</CollapseContent>
</>

API#

import CollapseContent from "erxes-ui/lib/components/CollapseContent";

* required prop

NameTypeDefaultDescription
contendIdstringJump to content
title*stringDefine title
children*React.ReactNodeDeclare content
descriptionReact.ReactNodeDescription that will be displayed under title
openbooleanActivates open function of container and collapse tag
compactboolean20pxDefine height of title container
imagestringImage that will be placed instead of arrows
beforeTitleReact.ReactNodeReact node that will be placed left side of title
onClickfunctionDefine click handler function
imageBackgroundstringBackground color of image
idstringGives id to collapse content
Last updated on by enkhzule