<template> <div class="card-list"> <div v-for="(card, index) in cards" :key="index" class="card" @click="toggleCard(index)" > <div class="card-header"> <h3>{{ card.title }}</h3> <span class="chevron" :class="{ rotated: expandedIndex === index }" >⌄</span> </div> <transition name="expand"> <div v-show="expandedIndex === index" class="card-body" > <p>{{ card.content }}</p> </div> </transition> </div> </div> </template> <script setup> import { ref } from 'vue' const cards = [ { title: 'Card 1', content: 'This is the detailed content of Card 1.' }, { title: 'Card 2', content: 'This is the detailed content of Card 2.' }, { title: 'Card 3', content: 'This is the detailed content of Card 3.' } ] const expandedIndex = ref(null) function toggleCard(index) { expandedIndex.value = expandedIndex.value === index ? null : index } </script> <style scoped> .card-list { max-width: 600px; margin: 0 auto; } .card { border: 1px solid #ccc; border-radius: 8px; margin-bottom: 12px; padding: 16px; cursor: pointer; background: #fff; transition: box-shadow 0.3s; } .card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; } .chevron { transition: transform 0.3s ease; display: inline-block; } .chevron.rotated { transform: rotate(180deg); } .card-body { margin-top: 12px; overflow: hidden; } /* Transition */ .expand-enter-active, .expand-leave-active { transition: all 0.3s ease; } .expand-enter-from, .expand-leave-to { max-height: 0; opacity: 0; } .expand-enter-to, .expand-leave-from { max-height: 300px; opacity: 1; } </style>