前端实现卡片，展开/收起效果（vue/React/html）

效果如下：

直接上代码，以下代码是基于vue2,如果需要React或者html’格式，可以直接使用国内Claude镜像或者GPT，让他帮忙转换下即可

<!-- CollapsibleContent.vue -->
<template>
  <div class="collapsible-wrapper">
    <h2 class="title">探索宇宙的奥秘</h2>
    
    <div 
      class="content-container"
      :class="{ 'is-expanded': isExpanded }"
    >
      <div class="content">
        宇宙浩瀚无垠，充满着无数未解之谜。从微观的量子世界到宏观的星系团，科学家们不断探索着自然界的奥秘。暗物质和暗能量的发现让我们意识到，已知的物质仅占宇宙总量的5%左右。黑洞的存在挑战着我们对时空的认知，而多重宇宙的理论则进一步拓展了我们的想象力。

        随着技术的进步，人类对宇宙的认识也在不断深入。射电望远镜让我们能够观测到遥远的星系，引力波探测器则帮助我们"听到"了宇宙中最剧烈的碰撞事件。行星探测器更是将人类的触角伸向了太阳系的边缘。

        在浩瀚的宇宙面前，地球就像一粒沙滩上的沙子。然而正是在这个看似渺小的星球上，孕育出了能够思考宇宙本质的智慧生命。人类对宇宙的探索永无止境，每一个新发现都会带来更多的问题，推动着科学不断向前发展。
      </div>
    </div>

    <button 
      class="toggle-button"
      @click="toggleExpand"
    >
      <span>{{ isExpanded ? '收起' : '展开' }}</span>
      <i :class="['icon', isExpanded ? 'icon-up' : 'icon-down']"></i>
    </button>
  </div>
</template>

<script>
export default {
  name: 'CollapsibleContent',
  
  data() {
    return {
      isExpanded: false
    }
  },

  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style scoped>
.collapsible-wrapper {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1a202c;
  margin-bottom: 1rem;
}

.content-container {
  position: relative;
  overflow: hidden;
  max-height: 3rem; /* 初始收起状态的高度 */
  transition: max-height 0.5s ease-in-out;
}

.content-container.is-expanded {
  max-height: 300px; /* 展开状态的最大高度，根据实际内容调整，这里如果过大，在收起时会有卡顿，因为收起时是从最大高度收起的 */
}

.content {
  line-height: 1.6;
  color: #4a5568;
}

.toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem;
  color: #3182ce;
  transition: color 0.2s;
  cursor: pointer;
  border: none;
  background: none;
}

.toggle-button:hover {
  color: #2c5282;
}

.toggle-button span {
  margin-right: 0.5rem;
}

.icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.icon-down::before,
.icon-up::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -75%) rotate(45deg);
}

.icon-up::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}
</style>