6個以上のparameterの場合、「他の入力項目を表示する」ボタンを押下するとアコーディオンで全項目のラベル・入力欄(input)が表示されるようにする。再度「他の入力項目を表示する」ボタンを押下するとアコーディオンが閉じる仕様にしたい

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

以下はそのような仕様に合わせた修正が加えられたコードです。

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>

<!-- 「他の入力項目を表示する」ボタン -->
<button class="btn btn-primary" type="button" id="showAllParametersButton">他の入力項目を表示する</button>

<script>
    $(document).ready(function(){
        // 「他の入力項目を表示する」ボタンがクリックされたときの処理
        $("#showAllParametersButton").click(function(){
            // アコーディオンを全て開く
            $(".accordion .collapse").addClass("show");
            // 「他の入力項目を表示する」ボタンを非表示にし、閉じるボタンを表示する
            $(this).hide();
            $("#hideAllParametersButton").show();
        });

        // 「他の入力項目を閉じる」ボタンがクリックされたときの処理
        $("#hideAllParametersButton").click(function(){
            // アコーディオンを全て閉じる
            $(".accordion .collapse").removeClass("show");
            // 「他の入力項目を閉じる」ボタンを非表示にし、開くボタンを表示する
            $(this).hide();
            $("#showAllParametersButton").show();
        });
    });
</script>

このコードでは、「他の入力項目を表示する」ボタンがクリックされた際に、アコーディオンを全て開き、ボタンを非表示にし、その代わりに「他の入力項目を閉じる」ボタンを表示します。そして、「他の入力項目を閉じる」ボタンがクリックされたときには、アコーディオンを全て閉じ、ボタンを非表示にし、「他の入力項目を表示する」ボタンを表示します。