<div id=”accordion”> <!– アコーディオン要素1 –> <div class=”card”> <div class=”card-header” id=”headingOne”> <h5 class=”mb-0″> <button class=”btn btn-link” data-toggle=”collapse” data-target=”#collapseOne” aria-expanded=”true” aria-controls=”collapseOne”> 追加項目を表示 </button> </h5> </div> <div id=”collapseOne” class=”collapse” aria-labelledby=”headingOne” data-parent=”#accordion”> <div class=”card-body”> {% for parameter in parameters|slice:”6:” %} <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> {% endfor %} </div> </div> </div> </div> アコーディオンがうまく機能しない

2024年6月8日

Bootstrap 4 のアコーディオンでは、data-toggle 属性と data-target 属性が使用されますが、Bootstrap 5 ではこれらが data-bs-toggle と data-bs-target に変更されています。したがって、Bootstrap 5 を使用している場合、これらの属性を変更する必要があります。

以下は、Bootstrap 5 を使用する場合の修正されたコードです。

html
<div id="accordion">

    <!-- アコーディオン要素1 -->
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
                    aria-controls="collapseOne">
                    追加項目を表示
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
            <div class="card-body">
                {% for parameter in parameters|slice:"6:" %}

                <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>
                {% endfor %}
            </div>
        </div>
    </div>

</div>

この修正により、Bootstrap 5 でアコーディオンが正しく動作するはずです。必要に応じて Bootstrap のバージョンに合わせて修正してください。