El Collapse

Collapse Component

Collapse component stores content in expandable panels, supporting accordion mode and custom styling.

When to Use

• FAQ sections
• Accordion panels
• Collapsible content areas
• Expandable lists

Basic Usage

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Consistency" name="1">
      <div>Content of panel 1</div>
    </el-collapse-item>
    <el-collapse-item title="Feedback" name="2">
      <div>Content of panel 2</div>
    </el-collapse-item>
    <el-collapse-item title="Efficiency" name="3">
      <div>Content of panel 3</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

Accordion Mode

<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item title="Panel 1" name="1">
      <div>Content</div>
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="2">
      <div>Content</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import { ref } from 'vue'

const activeName = ref('1')
</script>

Custom Title

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item name="1">
      <template #title>
        <span>Custom Title</span>
        <el-icon><InfoFilled /></el-icon>
      </template>
      <div>Content</div>
    </el-collapse-item>
  </el-collapse>
</template>

Custom Icon

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Panel" name="1" :icon="CaretRight">
      <div>Content</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import { CaretRight } from '@element-plus/icons-vue'
</script>

Prevent Collapsing

<template>
  <el-collapse v-model="activeNames" :before-collapse="beforeCollapse">
    <el-collapse-item title="Panel" name="1">
      <div>Content</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
const beforeCollapse = () => {
  return confirm('Are you sure you want to collapse?')
}
</script>

API Reference

Collapse Attributes

Collapse Events

Collapse Exposes

CollapseItem Attributes

CollapseItem Slots

Best Practices

1. Use accordion mode for single-panel expansion
2. Use before-collapse for confirmation dialogs
3. Customize icon position with expand-icon-position