BootstrapのAccordion（アコーディオン）でデフォルトで非表示にする

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

BootstrapのAccordion（アコーディオン）でデフォルトで非表示にするには、各アコーディオンパネルの collapsed クラスを追加します。以下は、アコーディオンパネルがデフォルトで非表示になるように修正したコードの例です。

html
<div class="accordion" id="additionalParametersAccordion">
    {% for parameter in parameters|slice:"5:" %}
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse{{ forloop.counter }}" aria-expanded="false"
                        aria-controls="collapse{{ forloop.counter }}">
                    {{ parameter.label }}
                </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.name }}" class="form-label">{{ parameter.label }}</label>
                        <input type="text" class="form-control" id="{{ parameter.name }}"
                               name="{{ parameter.name }}" value="{{ request.POST.parameter.name }}">
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

上記の変更により、各アコーディオンパネルはデフォルトで非表示になります。初めて開く際にアコーディオンが表示され、再度閉じると非表示になります。collapsed クラスがこの挙動を制御しています。