两列全宽展开手风琴JS优化：支持多按钮点击与自动折叠已展开项

1 修正HTML错误（重复ID问题） #

原代码重复使用相同ID不符合DOM规范，是导致只有第一个按钮生效的核心原因，替换为类名并添加索引关联属性：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="column">
    <button class="accordion-btn" data-panel="0">I am Button #1</button>
    <button class="accordion-btn" data-panel="2">I am Button #3</button>
  </div>
  <div class="column">
    <button class="accordion-btn" data-panel="1">I am Button #2</button>
    <button class="accordion-btn" data-panel="3">I am Button #4</button>
  </div>
</div>

<div class="accordion-panel">
  <p class="accordion-content"> So here I am #1</p>
</div>
<div class="accordion-panel">
  <p class="accordion-content"> So here I am #2</p>
</div>
<div class="accordion-panel">
  <p class="accordion-content"> So here I am #3</p>
</div>
<div class="accordion-panel">
  <p class="accordion-content"> So here I am #4</p>
</div>

2 调整CSS选择器 #

对应替换ID选择器为类选择器，原有交互样式保持不变：

.accordion-panel {
  background: #ccc;
  margin-top: 2%;
  overflow: hidden;
  transition: height 200ms;
  height: 0;
}

.accordion-btn {
  padding: 10px;
  margin-top: 5px;
  width:50%;
  margin-left: 10%;
  cursor: pointer;
}

.row {
   display: flex;
}
.column {
  flex: 50%;
}

3 重构JS逻辑 #

适配多按钮场景，同时实现点击新按钮自动关闭其他展开项的需求：

$(function() {
  // 缓存所有按钮和面板元素
  const $btns = $('.accordion-btn');
  const $panels = $('.accordion-panel');

  $btns.click(function() {
    // 获取当前按钮对应面板的索引
    const targetIndex = $(this).data('panel');
    const $targetPanel = $panels.eq(targetIndex);

    // 先关闭所有非当前面板的已展开项
    $panels.not($targetPanel).removeClass('open').height(0);

    // 切换当前面板的展开/收起状态
    if ($targetPanel.hasClass('open')) {
      $targetPanel.removeClass('open').height(0);
    } else {
      const contentHeight = $targetPanel.find('.accordion-content').outerHeight(true);
      $targetPanel.addClass('open').height(contentHeight);
    }
  });
});

扩展说明 #

后续新增按钮和面板时，只需要给新增按钮添加data-panel属性指定对应面板的序号（从0开始计数），新增面板添加accordion-panel类即可，无需修改JS代码，完全适配任意数量的组件需求。

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