デフォルトで閉じた状態にしたいんだよね

2024年6月8日

Bootstrapのアコーディオンでデフォルトで閉じた状態にするには、show クラスを使用します。Bootstrapでは、アコーディオンの各アイテムに show クラスが追加されている場合、そのアイテムは最初から展開された状態になります。

以下は、デフォルトで閉じた状態にしたいアコーディオンの例です。

html
<div id="myAccordion" class="accordion">
    <!-- アコーディオンアイテム1 -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                アコーディオンアイテム1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse">
            <div class="accordion-body">
                <!-- アイテム1のコンテンツ -->
                ...
            </div>
        </div>
    </div>

    <!-- アコーディオンアイテム2 -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                アコーディオンアイテム2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                <!-- アイテム2のコンテンツ -->
                ...
            </div>
        </div>
    </div>

    <!-- 他のアコーディオンアイテムも同様に続く -->
</div>

各アコーディオンアイテムの collapse クラスは、デフォルトで閉じた状態にします。show クラスは最初から表示される状態にしたい場合に使用しますが、今回は閉じた状態にするため不要です。