如何实现带动画的Show More/Show Less按钮，实现文本部分隐藏与展开

一、完整实现代码 #

1. 修改后的HTML结构 #

<!-- 请确保已本地引入Font Awesome图标库 -->
<div class="qodef-m-content">
  <div class="qodef-m-text collapsible-text">
    <p>Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants.
       En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques.
       Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement.</p>
    <div class="collapsible-text__hidden">
      <p>2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon diplôme d’esthéticienne que j’obtiens.
         Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire . 
         Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.</p>
    </div>
  </div>
  <button class="toggle-btn" data-state="collapsed">
    <i class="fa fa-chevron-down"></i> Show More
  </button>
</div>

2. 增强后的CSS样式 #

/* 原有文本基础样式 */
.qodef-m-text {
    font-family: "Cormorant Garamond", sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 33px;
    line-height: 42px;
    width: 80%;
    margin-left: 10%;
}

/* 隐藏内容容器样式（带展开/收起动画） */
.collapsible-text__hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.collapsible-text__hidden.expanded {
    max-height: 500px; /* 设置为足够容纳隐藏内容的高度 */
    transition: max-height 0.5s ease-in;
}

/* 切换按钮样式 */
.toggle-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    margin-left: 10%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-btn i {
    transition: transform 0.3s ease;
}

/* 展开状态下的图标旋转效果 */
.toggle-btn.expanded i {
    transform: rotate(180deg);
}

3. 交互逻辑JavaScript #

const toggleBtn = document.querySelector('.toggle-btn');
const hiddenContent = document.querySelector('.collapsible-text__hidden');

toggleBtn.addEventListener('click', () => {
    const isExpanded = toggleBtn.dataset.state === 'expanded';
    
    if (isExpanded) {
        hiddenContent.classList.remove('expanded');
        toggleBtn.dataset.state = 'collapsed';
        toggleBtn.innerHTML = '<i class="fa fa-chevron-down"></i> Show More';
    } else {
        hiddenContent.classList.add('expanded');
        toggleBtn.dataset.state = 'expanded';
        toggleBtn.innerHTML = '<i class="fa fa-chevron-up"></i> Show Less';
    }
});

二、核心实现说明 #

• 文本拆分：将长文本分为默认显示段和隐藏段，隐藏段放在专用容器中实现初始隐藏
• 平滑动画：通过max-height的过渡属性实现内容展开/收起的平滑动画，避免生硬跳转
• 图标切换：利用Font Awesome的箭头图标，配合CSS旋转动画实现展开/收起状态的视觉反馈
• 状态控制：通过按钮的data-state属性跟踪当前状态，同步更新内容显示状态和按钮文本、图标

内容的提问来源于stack exchange，提问作者bilel abdelmoula