{% for parameter in parameters %} これで5つ目以降は、アコーディオンで表示させたいの

2024年6月8日

理解しました。以下は、アコーディオンで表示する形式に変更したコードです。ここでは Bootstrap の Collapse コンポーネントを使用しています。

html
<!-- フォームの最初の3つを表示 -->
<div class="row">
    {% for parameter in parameters|slice:":3" %}
        <div class="col-md-4">
            <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>
    {% endfor %}
</div>

<!-- アコーディオンで表示するフォーム -->
<div class="accordion" id="additionalParametersAccordion">
    {% for parameter in parameters|slice:"3:" %}
        <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="true" 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>
    {% endfor %}
</div>

このコードでは、parameters リスト内の最初の3つの要素を通常のフォームとして表示し、残りの要素に対してはアコーディオンで表示しています。アコーディオンは Bootstrap の Collapse コンポーネントを使用しており、各アコーディオン要素のボタンをクリックするとその要素のフォームが開閉します。