如何实现默认展开的手风琴（Accordion）菜单，点击标题可收起

你只需要在原有JS逻辑基础上新增初始化代码，就能实现默认全部展开、点击收起的效果，原有CSS、HTML代码无需大幅改动：

1. 修改后的JS代码 #

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  // 新增初始化逻辑：默认给所有手风琴标题加active类，对应展开状态
  acc[i].classList.add("active");
  var panel = acc[i].nextElementSibling;
  // 初始化时直接设置面板高度为内容实际高度，默认展开
  panel.style.maxHeight = panel.scrollHeight + "px";
  // 原有点击逻辑完全保留，无需改动
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

2. 原有CSS代码无需调整 #

你现有的CSS逻辑完全适配修改后的效果：默认手风琴标题带有active类，右侧会显示减号对应展开状态，点击收起后active类移除，显示加号，符合常规交互认知。

3. HTML代码保持原样即可 #

不需要修改现有HTML结构。 #

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