Collapse

Collapse is a flexible component for showing and hiding content behind a title. It supports standalone and accordion modes, arrow/plus variants, and toggleable open/close states.

Basic Usage

Example Collapse 1

When the title is focused, this content will show.

Example Collapse 2

When the title is focused, this content will show.

Code Example

Basic.vue

Components

The Collapse components include the following:

Collapse - shows and hides content behind a title.
CollapseTitle - goes inside the Collapse and toggles the state when clicked.
CollapseContent - holds content and will display when the Collapse is open.

Collapse

The main Collapse component. Can be used standalone or inside an Accordion. Supports arrow/plus styles, controlled open/close, and toggle mode.

Collapse Props	Type	Description
variant	string	Sets the variant of the collapse indicator. Options: `arrow`, `plus`.
arrow	boolean	Shortcut for `style="arrow"`.
plus	boolean	Shortcut for `style="plus"`.
open	boolean	Controls whether the collapse is open. Useful for manual control.
close	boolean	Controls whether the collapse is closed. Useful for manual control.
toggle	boolean	Uses a hidden toggleable input (checkbox for standalone, radio for Accordion) to control open/close state.
value	any	The value of this Collapse (used for Accordion integration).

Collapse Slots	Description
default	The default slot. Place CollapseTitle and CollapseContent as children here.

CollapseTitle

The title/header area for the Collapse. Clicking toggles open/close. Place inside a Collapse component.

CollapseTitle Slots	Description
default	The default slot. Content to be displayed as the collapse title.

CollapseContent

The collapsible content area. Place inside a Collapse component. Only visible when open.

CollapseContent Slots	Description
default	The default slot. Content to be displayed when the Collapse is open.

Examples

Plain

Unstyled collapse example, showing basic usage without extra classes.

Unstyled Collapse 1

When the title is focused, this content will show.

Unstyled Collapse 2

When the title is focused, this content will show.

Code Example

Plain.vue

Variant

Demonstrates the variant prop with arrow and plus options.

Arrow Variant

This uses variant="arrow".

Plus Variant

This uses variant="plus".

Code Example

Variant.vue

Arrow & Plus Shortcuts

Demonstrates the arrow and plus boolean shortcut props.

Arrow Shortcut

This uses the arrow boolean shortcut.

Plus Shortcut

This uses the plus boolean shortcut.

Code Example

ArrowPlus.vue

Open

Collapse components that are open by default using the open prop.

Open Collapse 1

When the title is focused, this content will show.

Open Collapse 2

When the title is focused, this content will show.

Code Example

Open.vue

Close

Keep the collapse closed by default using the close prop.

Close Collapse 1

When the title is focused, this content will show.

Close Collapse 2

When the title is focused, this content will show.

Code Example

Close.vue

Toggle

Collapse components controlled by a toggleable input using the toggle prop, with different color themes.