我如何创建手风琴外观/感觉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. 在每个click event listener上添加了一个button
2. 单击时，检查内容是否为expanded。在显示隐藏内容之前隐藏扩展的内容。
3. 创建CSS类以显示和隐藏内容。

如果您需要动画，如在实际手风琴，您可以添加CSS转换，以改变高度。参见此堆栈