アコーディオンの動きを正常にしたい。

Question

前提・実現したいこと

アコーディオンのうち、一番下を開くと同時に上が開きます。その後も不規則に開きます。
ご教授いただけるとありがたいです。

発生している問題・エラーメッセージ

エラーメッセージは特にありません。

該当のソースコード

 <div id="home_accordion" class="accordion">
            <div class="card">
                <div class="accordion-title">
                {% for block in self.content %}
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            {{ block.value.title }}
                        </button>
                    </h2>
                </div>
                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>{% include_block block.value.text %}</strong>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

試したこと

{% %}が原因だと考えたので、位置を調節しました。

Answer 1

解決できませんでしたので、とりあえず撤廃することにいたしました。