实现交互式FAQ手风琴：点击展开与折叠的动态效果

<div class="condensed-faq-accordion-outer-wrapper">
  <!-- 单个FAQ项 -->
  <div class="condensed-faq-accordion-fold">
    <!-- FAQ头部/问题区 -->
    <div class="condensed-faq-top-accordion">
      <div class="condensed-faq-top-accordion-inner">
        <h3>这是一个问题标题</h3>
        <img src="https://...arrow-down-purple.svg" alt="展开/折叠图标">
      </div>
    </div>
    <!-- FAQ内容/答案区 -->
    <div class="condensed-faq-bottom-accordion">
      <div class="condensed-faq-bottom-accordion-outer">
        <p>这是问题的详细答案内容。</p>
      </div>
    </div>
  </div>
  <!-- 更多 FAQ 项... -->
  <div class="condensed-faq-accordion-fold">
    <!-- ... -->
  </div>
</div>

/* 默认隐藏答案内容，并设置过渡效果 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  height: 0px; /* 初始高度为0，隐藏内容 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  transition: all .3s ease-in-out; /* 所有属性变化在0.3秒内平滑过渡 */
}

/* 当FAQ项处于激活状态时 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  height: auto; /* 激活时高度自适应内容 */
  padding: 20px 32px; /* 添加内边距以显示内容 */
  /* 可以添加背景色等样式 */
  background: #F5F5F5;
}

/* 激活状态下头部样式变化 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-top-accordion {
  background: #1D0254; /* 头部背景色变化 */
  transition: all .3s;
}
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-top-accordion h3 {
  color: #FFF; /* 标题文字颜色变化 */
}

$('.condensed-faq-accordion-fold').click(function(){
  // 1. 移除所有FAQ项的'active'类
  $('.condensed-faq-accordion-fold').removeClass('active');
  // 2. 将所有图标设置为向下箭头
  $('.condensed-faq-top-accordion-inner img').attr('src','https://...arrow-down-purple.svg');
  // 3. 给当前点击的FAQ项添加'active'类
  $(this).addClass('active');
  // 4. 将当前点击项的图标设置为向上箭头
  $(this).find('.condensed-faq-top-accordion-inner img').attr('src','https://...arrow-up-yellow.svg');
});

$(document).ready(function() {
  $('.condensed-faq-accordion-fold').click(function(){
    const $this = $(this); // 缓存当前点击的jQuery对象
    const wasActive = $this.hasClass('active'); // 在切换前检查当前项是否已激活

    // 1. 折叠所有其他FAQ项，并将其图标设置为向下箭头
    $('.condensed-faq-accordion-fold').not($this).each(function() {
      $(this).removeClass('active');
      $(this).find('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg');
    });

    // 2. 切换当前点击FAQ项的'active'类
    $this.toggleClass('active');

    // 3. 根据当前点击FAQ项的新状态更新其图标
    if ($this.hasClass('active')) {
      // 如果当前项现在是激活状态（展开），显示向上箭头
      $this.find('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-up-yellow.svg');
    } else {
      // 如果当前项现在不是激活状态（折叠），显示向下箭头
      $this.find('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg');
    }
  });
});