Bootstrapのアコーディオン「追加項目を開く」ボタンを押下したら、全て表示される仕様にしたい

2024年6月8日2024年6月23日

了解しました。Bootstrapのアコーディオンでは、一度開いたアコーディオンは手動で閉じる必要がないように設定できます。以下は修正されたコードです。

html
<!-- アコーディオンで表示するフォーム（3カラム） -->
<div class="accordion" id="additionalParametersAccordion">
    <div class="row">
        {% for parameter in parameters|slice:"6:" %}
            <div class="col-md-4">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ forloop.counter }}" aria-expanded="false" aria-controls="collapse{{ forloop.counter }}">
                            {{ parameter }}
                        </button>
                    </h2>
                    <div id="collapse{{ forloop.counter }}" class="accordion-collapse collapse" aria-labelledby="heading{{ forloop.counter }}" data-bs-parent="#additionalParametersAccordion">
                        <div class="accordion-body">
                            <div class="mb-3">
                                <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                                <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}" value="{{ request.POST.parameter }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script>
    // ページ読み込み時に全てのアコーディオンを開く
    $(document).ready(function(){
        $(".accordion .collapse").addClass("show");
    });
</script>

このコードでは、ページが読み込まれたときに全てのアコーディオンを開くために、JavaScriptを使用しています。jQueryを使用しているため、jQueryが読み込まれていることを確認してください。