Collapsible

Collapsible elements are used to show and hide content using a smooth reveal transition.

Collapsing an element will animate the height from zero to its default value. This component is useful for creating clearly separated content sections such as FAQ pages.

Item Header

You can use the header slot to provide a custom title for the collapsible panel's heading.

Default Open Panels

Panels can be opened by default, on page load, using the v-model directive of the <ICollapsible> component. First, you'll need to assign an id to the <ICollapsibleItem> components which will identify the open panels.

Accordion

Accordion collapsible groups can have only one content panel open at a single time. This behaviour can be set using the accordion property.

Color Variants

Inkline includes basic predefined collapsible colors that you can use within your application. You can apply a style using the color property.

Size Variants

You're able to use the size modifier to control the text and spacing size of your collapsible, using one of the available sizes: sm, md, and lg. The default size is set to md.

Props

ICollapsible
ICollapsibleItem

Slots

ICollapsible
ICollapsibleItem

Events

ICollapsible

Design Tokens

ICollapsible
ICollapsibleItem