複数のセクションを一度に展開できるように、アコーディオンのルック・アンド・フィールの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. は、コンテンツがexpandedかそうでないかをチェックする、各button
2. にclick event listenerを追加しました。隠されたコンテンツを公開する前に、拡張コンテンツを非表示にする。
3. CSSのクラスを作成して表示し、非表示にします。

実際のアコーディオンのようなアニメーションが必要な場合は、CSSトランジションを追加して高さを変更できます。これを参照してくださいstack