Skip to main content

Collapse

Extended from Reka UI Collapsible

Per our writing guidelines, please ensure the title is in Sentence case.

Default

Expanded

Use the visible prop to control the initial collapsed/expanded state.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in aliquam ex. Nullam vestibulum ex mi, ut suscipit libero condimentum id. Pellentesque eu diam vel nisi molestie porta eget sed odio. Quisque congue risus id metus facilisis, non imperdiet libero rutrum. Mauris vitae ante porttitor, consectetur purus faucibus, euismod ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ullamcorper elit sed viverra finibus. Mauris vitae tortor mauris. Cras suscipit nibh nec nisi cursus ornare. Maecenas quis turpis sit amet sapien dapibus sollicitudin viverra eu justo. Vivamus posuere metus sit amet purus tempus volutpat. Donec eleifend elit quam.

Color change and no border

This shows how to remove the border and change the color of the text and icon by using the trigger-class prop.

No border, background, multiple titles

This shows a larger title section and how to remove the border and apply a background color.

External control with user override

This shows the behavior of the collapse being controlled by a separate toggle, by passing a reactive variable to the visible prop. By default, controlled collapses like this will automatically stop responding to the outside control as soon as a user interacts with the collapse directly, to ensure the user's choice is respected.

External control without user override

Use v-model and set is-programmatic-until-user-input to false if you need the collapse to remain externally controlled whether or not the user interacts with it.

EsCollapse props

Name
border
Type
Boolean
Default
true
Description
Will show or hide borders on the top and bottom.
Name
isProgrammaticUntilUserInput
Type
Boolean
Default
true
Description
Controls whether manual user input permanently overrides external control coming in via v-model or the visible prop.
Name
triggerClass
Type
String
Default
'text-body'
Description
A CSS class to apply to the button that contains the title and chevron icon.
Name
visible
Type
Boolean
Default
false
Description
Controls whether the collapse is expanded. Is ignored once the user interacts with the collapse, unless isProgrammaticUntilUserInput is false.

EsCollapse events

Name
toggled
Argument
value (boolean)
Description
Emitted when the component either collapses or expands, whether from user interaction or programmatic control.
Name
userClick
Argument
value (boolean)
Description
Emitted when the user manually clicks on the trigger button to expand or collapse the component.