如何让W3C提供的Accordion组件默认处于折叠状态？

你遇到的问题核心是：虽然按钮的aria-expanded设为false，但组件初始化时仅读取了这个状态到变量，并未同步更新内容面板的可见状态——代码里没有根据初始的aria-expanded值给内容面板添加hidden属性。

两种修复方法： #

方法1：直接修改HTML，默认隐藏面板

在内容面板的<div>标签中添加hidden属性，页面加载时就会默认折叠：

<div id="sect1"
     role="region"
     aria-labelledby="accordion1id"
     class="accordion-panel"
     hidden> <!-- 新增该属性 -->
  <div>
    <div class="accordion-content">
      Section 1 content
    </div>
  </div>
</div>

方法2：修改JavaScript构造函数，初始化同步状态

在Accordion类的构造函数末尾，添加逻辑根据初始状态更新DOM：

class Accordion {
  constructor(domNode) {
    this.rootEl = domNode;
    this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');

    const controlsId = this.buttonEl.getAttribute('aria-controls');
    this.contentEl = document.getElementById(controlsId);

    this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';

    // 新增：初始化时同步面板可见状态
    if (!this.open) {
      this.contentEl.setAttribute('hidden', '');
    }

    this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
  }

  // 其余原有代码保持不变
}

或者更简洁的写法，直接调用已有的toggle方法（它会自动判断状态是否需要更新）：

// 替换上述新增代码为：
this.toggle(this.open);

两种方法任选其一，都能实现页面加载时面板默认折叠的效果。

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