How can I create accordion look/feel javascript which will allow several sections to be expanded at once?

Question

I want to be able to expand multiple panels of accordion with the following markup. I also need to use expand/collapse icons accordingly.
Is there a simple way to get it done with JavaScript?

My html code:

<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

So far, I've created this fiddle from your code above. Here is how it works.

1. added a click event listener on each button
2. when clicked, checking if the content is expanded or not. Hiding expanded content before revealing the hidden content.
3. Created CSS classes to display and and hide the content.

If you need animations, like in an actual Accordion, you can add CSS transitions to change the height. See this stack