Install

import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';

const app = createApp();
app.use(Collapse);
app.use(CollapseItem);

Usage

Basic Usage

Use v-model to control the name of active panels.

<van-collapse v-model="activeNames">
  <van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
  <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
  <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
};

Accordion

In accordion mode, only one panel can be expanded at the same time.

<van-collapse v-model="activeName" accordion>
  <van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
  <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
  <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('1');
    return { activeName };
  },
};

Disabled

Use the disabled prop to disable CollapseItem.

<van-collapse v-model="activeNames">
  <van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
  <van-collapse-item title="Title2" name="2" disabled>
    Content 2
  </van-collapse-item>
  <van-collapse-item title="Title3" name="3" disabled>
    Content 3
  </van-collapse-item>
</van-collapse>

Custom title

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>Title1 <van-icon name="question-o" /></div>
    </template>
    Content 1
  </van-collapse-item>
  <van-collapse-item title="Title2" name="2" icon="shop-o">
    Content 2
  </van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
};

Toggle All

Using toggleAll method to toggle all items.

<van-collapse v-model="activeNames">
  <van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
  <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
  <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
</van-collapse>

<van-button type="primary" @click="openAll">Open All</van-button>
<van-button type="primary" @click="toggleAll">Toggle All</van-button>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    const collapse = ref(null);

    const openAll = () => {
      collapse.value.toggleAll(true);
    }
    const toggleAll = () => {
      collapse.value.toggleAll();
    },

    return {
      activeNames,
      openAll,
      toggleAll,
      collapse,
    };
  },
};

Tips: The toggleAll method cannot be used in accordion mode.

API

Collapse Props

Attribute	Description	Type	Default
v-model	Names of current active panels	accordion mode: number \| string non-accordion mode: (number \| string)[]	-
accordion	Whether to be accordion mode	boolean	`false`
border	Whether to show outer border	boolean	`true`

Collapse Events

Event	Description	Arguments
change	Emitted when switching panel	activeNames: string \| number \| Array<string \| number>

CollapseItem Props

Attribute	Description	Type	Default
name	Name	number \| string	`index`
icon	Left Icon	string	-
size	Title size, can be set to `large`	string	-
title	Title	number \| string	-
value	Right text	number \| string	-
label	Description below the title	string	-
border	Whether to show inner border	boolean	`true`
disabled	Whether to disabled collapse	boolean	`false`
readonly `v3.0.12`	Whether to be readonly	boolean	`false`
is-link	Whether to show link icon	boolean	`true`
lazy-render `v3.4.5`	Whether to lazy render util opened	boolean	`true`
title-class	Title className	string	-
value-class	Value className	string	-
label-class	Label className	string	-

Collapse Methods

Use ref to get Collapse instance and call instance methods.

Name	Description	Attribute	Return value
toggleAll `v3.5.3`	Toggle the expanded status of all collapses	options?: boolean \| object	-

toggleAll Usage

import { ref } from 'vue';
import type { CollapseInstance } from 'vant';

const collapseRef = ref<CollapseInstance>();

// Toggle all
collapseRef.value?.toggleAll();
// Expand all
collapseRef.value?.toggleAll(true);
// UnExpand all
collapseRef.value?.toggleAll(false);

// Toggle all, skip disabled
collapseRef.value?.toggleAll({
  skipDisabled: true,
});
// Expand all, skip disabled
collapseRef.value?.toggleAll({
  expanded: true,
  skipDisabled: true,
});

CollapseItem Methods

Use ref to get CollapseItem instance and call instance methods.

Name	Description	Attribute	Return value
toggle	Toggle expanded status	expanded: boolean	-

Types

The component exports the following type definitions:

import type {
  CollapseProps,
  CollapseItemProps,
  CollapseItemInstance,
  CollapseToggleAllOptions,
} from 'vant';

CollapseItemInstance is the type of component instance:

import { ref } from 'vue';
import type { CollapseItemInstance } from 'vant';

const collapseItemRef = ref<CollapseItemInstance>();

collapseItemRef.value?.toggle();

CollapseItem Slots

Name	Description
default	Content
title	Custom header title
value	Custom header value
label `v3.1.1`	Custom header label
icon	Custom header left icon
right-icon	Custom header right icon

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-collapse-item-transition-duration	var(--van-animation-duration-base)	-
--van-collapse-item-content-padding	var(--van-padding-sm) var(--van-padding-md)	-
--van-collapse-item-content-font-size	var(--van-font-size-md)	-
--van-collapse-item-content-line-height	1.5	-
--van-collapse-item-content-text-color	var(--van-text-color-2)	-
--van-collapse-item-content-background-color	var(--van-background-color-light)	-
--van-collapse-item-title-disabled-color	var(--van-text-color-3)	-

Collapse

Intro