Accordion: how to have it collapsed by default

[chopinesque]

Using the following I would expect it to be collapsed by default, it is not though, what am I mising?

<div id="accordionExample" class="accordion">
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADER</button></h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">

CONTENT

</div>
</div>
</div>
</div>

[crftwrk]

Class show on collapse means that collapse is shown. So, remove show class on collapse and set aria-expanded="true" to false in the button and collapse is collapsed.

See https://getbootstrap.com/docs/5.3/components/accordion/#example

<div id="accordionExample" class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">HEADER</button></h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">

        CONTENT

      </div>
    </div>
  </div>
</div>