# Collapse

Conditionnaly display some content.

# Config

The options below are to be set in the global configuration at the following location:

{
    components: {
        collapse: {
            // ...
        },
        collapseBtn: {
            // ...
        }
        collapseContent: {
            // ...
        }
    }
}

# CCollapse, CCollapseBtn and CCollapseContent

# class

Classes applied to the component root element, except when the prop bare is set to true. See styling components.

type: Array<String | Object> | Object | String | (props: Object) => {}
default: null

# Example

Using the CCollapseBtn component:

class({ active }) {
    return ['collapse-btn', {
        'collapse-btn--active': active,
    }]
}

# CCollapseBtn

# inheritBtnClass

Since the CCollapseBtn is a CBtn in the background, it will inherits its class config option. To disable this behavior, set this option to false.

type: Boolean
default: true

# CCollapseContent

# transition

Apply a common transition to all Collapses. The object can contain any Vue built-in transition component props (opens new window).

type: object
default: null

# Example

{ name: 'fade', mode: 'out-in' }

# API

CCollapse

Name Type Default Description

Props

variant

string|array

null

Useful when used in the component config class option, to style it conditionally. See styling components.

bare

boolean

false

Disable class inheritance from the component config. See styling components.

modelValue

boolean

false

Optionally bind the Collapse state with the parent component.

Events

update:modelValue

Slots

default

Binding name	Type	Description
active	`boolean`	`true` when collapse is open

CCollapseBtn

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.
Slots
default

CCollapseContent

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.
transition	`BaseTransitionProps \| false`	`null`	The object can contain any Vue built-in transition component props. For example: `{ name: "fade", mode: "out-in" }`. If you defined a default transition in the config and want to disable it, use `false`.

# Examples

# Simplest

<CCollapse>
  <CCollapseBtn>Collapse</CCollapseBtn>
  <CCollapseContent>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
  </CCollapseContent>
</CCollapse>

# Controlled

You can control the Collapse status with the v-model directive, for example to make it open by default or to programatically change its state.

<script>
export default {
    data() {
        return { collapseOpen: true };
    },
};
</script>

<template>
    <CCollapse v-model="collapseOpen">
        <CCollapseBtn>{{ collapseOpen ? 'Close' : 'Open' }}</CCollapseBtn>
        <CCollapseContent>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
            in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis
            fuga cupiditate suscipit blanditiis, aliquid minima harum molestias
            pariatur tempora ab, libero quo maiores sapiente doloribus nihil
            commodi eaque accusantium praesentium! Nobis natus qui voluptate
            inventore molestias quisquam, consequuntur harum?
        </CCollapseContent>
    </CCollapse>
</template>

# With transition

Here’s an example where the transition is directly passed as a prop to the CCollapseContent. You can also define it globally for all your collapses; see the config.

<CCollapse>
  <CCollapseBtn>Collapse with transition</CCollapseBtn>
  <CCollapseContent :transition="{ name: 'fade' }">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
  </CCollapseContent>
</CCollapse>

← Button Dialog →