Collapsible

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

Example

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.

Collapsible Example
Item 1
Item 2
Item 3

Item Title

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

Collapsible Title
Item 1
Item 2
Item 3

Default Open Panels

Panels can be opened by default, on page load, using the active field of the <i-collapsible> component. First, you'll need to assign an id to the <i-collapsible-item> components which will identify the open panels.

Default Open Collapsible Panel
Item 1
Item 1 content
Item 2
Item 3

Accordion

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

Collapsible Accordion
Item 1
Item 2
Item 3

Color Variants

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

Collapsible Variants
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

API

Collapsible API <i-collapsible>
Property Description Type Accepted Default
accordion Sets the collapsible in accordion mode. Boolean true, false false
active Sets the default active collapsible item. Array []
variant Sets the color variant of the collapsible component. String light, dark light
Collapsible Item API <i-collapsible-item>
Property Description Type Accepted Default
title Sets the title of the collapsible panel. Replaceable using the title slot. String
id Sets the identifier of the collapsible item. String collapsible-item-<uid>