为按钮添加Font Awesome上下图标并实现点击切换（手风琴式）效果

要给现有按钮添加上下排列的Font Awesome切换图标，按以下步骤修改代码：

1. 引入Font Awesome样式 #

先确保项目中已引入Font Awesome，可在HTML头部添加样式引用（若本地已有资源可替换为本地路径）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

2. 修改HTML结构 #

把按钮内的文字替换为两个上下排列的Font Awesome图标，分别对应展开和收起状态，初始只显示其中一个：

<button class="eco-btn" onclick="toggle_div_fun('sectiontohide');">
  <div class="icon-container">
    <i class="fa-solid fa-chevron-up hide-icon"></i>
    <i class="fa-solid fa-chevron-down show-icon"></i>
  </div>
</button>
<div id="sectiontohide">This is the div to hide</div>

3. 添加CSS样式 #

给图标容器设置垂直排列，同时默认隐藏收起状态的图标：

.icon-container {
  display: flex;
  flex-direction: column;
  gap: 2px; /* 可选：调整图标间距 */
}
.hide-icon {
  display: none;
}

4. 更新JavaScript函数 #

修改原函数，在切换div显示状态的同时，切换两个图标的显示：

function toggle_div_fun(id) { 
  var divelement = document.getElementById(id);
  // 获取两个图标元素
  const upIcon = document.querySelector('.fa-chevron-up');
  const downIcon = document.querySelector('.fa-chevron-down');

  if (divelement.style.display === 'flex') {
    divelement.style.display = 'none';
    // 切换图标：显示向下箭头，隐藏向上箭头
    upIcon.style.display = 'none';
    downIcon.style.display = 'block';
  } else {
    divelement.style.display = 'flex';
    // 切换图标：显示向上箭头，隐藏向下箭头
    upIcon.style.display = 'block';
    downIcon.style.display = 'none';
  }
}

补充说明 #

• 若你的div初始状态是隐藏的，记得给sectiontohide添加初始样式display: none;，同时调整图标初始显示状态
• 可以根据需求替换Font Awesome图标，比如用fa-plus和fa-minus替代箭头图标

内容的提问来源于stack exchange，提问作者meysam code