如何创建手风琴外观/感觉javascript，它可以一次扩展几个部分？

Question

我希望能够使用以下标记扩展多个手风琴面板。 我还需要相应地使用展开/折叠图标。
有没有简单的方法可以用JavaScript完成？

我的html代码：

<ul class="usa-accordion">
<li>
<button class="usa-accordion-button"
aria-expanded="false" aria-controls="heading-1">
Heading 1
</button>
<div id="amendment-1" class="usa-accordion-content">
<p>
- some text - some text - some text -
</p>
</div>
</li>
<li>
<button class="usa-accordion-button"
aria-controls="heading-2">
Heading 2
</button>
<div id="amendment-2" class="usa-accordion-content">
<p>
- some text - some text - some text -
</p>
</div>
</li>
</ul>

Answer 1

到目前为止，我已经根据您上面的代码创建了这个小提琴 。 下面是它的工作原理。

1. 在每个button上添加了一个click event listener button
2. 单击时，检查内容是否已expanded 。 隐藏隐藏的内容之前，先隐藏扩展内容。
3. 创建了CSS类来显示和隐藏内容。

如果您需要动画，例如在实际的手风琴中，可以添加CSS过渡来更改高度。 看到这个堆栈