如何设置collapsible折叠组件默认展开

你现有代码逻辑已经很完整，只需要加极少量代码就能实现默认展开，不需要改动原有交互：

方案一：静态配置（适合内容固定不变的场景） #

直接修改两处HTML标签属性即可：

• 给折叠按钮加上active类，让按钮初始就匹配展开状态的样式（红色激活背景、右侧减号图标）
• 给内容容器设置初始行内max-height值，只要这个值大于内容实际总高度就不会出现截断

修改后的对应代码片段：

<button class="collapsible3 active">Button</button>
<div class="content3" style="max-height: 500px;">
    <p> </p>
    <p style="font-size: 16px; text-indent: 20px;">Content</p>
</div>

如果后续你调整了内容长度，对应调大max-height的数值即可。

方案二：动态适配（推荐，无需手动计算高度） #

不需要修改HTML和CSS，只需要在你原有JS的事件绑定循环末尾加两行初始化代码，页面加载时会自动计算内容高度、设置展开状态，不管内容多长都能完美适配：
修改后的完整JS代码如下：

var coll = document.getElementsByClassName("collapsible3");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
  // 初始化默认展开状态
  coll[i].classList.add("active");
  let content = coll[i].nextElementSibling;
  content.style.maxHeight = content.scrollHeight + "px";
}

改完刷新页面就能看到折叠面板默认展开，原有点击切换的功能完全不受影响。

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