如何创建手风琴外观/感觉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

到目前为止，我已从上面的代码中创建了此fiddle。 这是它的工作原理。

1. 在每个click event listener
上添加button 单击
2. ，检查内容是否为expanded。在揭示隐藏内容之前隐藏扩展内容。
3. 创建CSS类以显示和隐藏内容。

如果您需要动画，例如在实际的Accordion中，您可以添加CSS过渡以更改高度。见stack