Bootstrap アコーディオン・Collapse完全ガイド｜複数同時に開く・1つだけ開く data-bs-parent の使い分け

複数同時に開く/1つだけ開く：data-bs-parent の使い分けガイド

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのアコーディオンって、クリックすると開いたり閉じたりしますよね。でも、全部同時に開いたり、1つしか開かないようにしたりできますか？」

先生

「できます。BootstrapのCollapse機能とdata-bs-parentという指定を使い分けることで動きを変えられます。」

生徒

「data-bs-parentって聞いたことはあるけど、何をしているのかよく分かりません…。」

先生

「大丈夫です。パソコンを触ったことがない人でも分かるように、たとえ話を交えて順番に説明します。」

1. BootstrapのアコーディオンとCollapseとは？

Bootstrapのアコーディオンとは、クリックすると中身が開いたり閉じたりする仕組みです。よくある質問ページで、質問を押すと答えが表示される動きを想像してください。

この動きの正体は、BootstrapのCollapseという機能です。Collapseは「折りたたむ」という意味で、画面をすっきり見せるためによく使われます。

アコーディオンは、Collapseを複数まとめて使いやすくした部品だと考えると分かりやすいです。

2. 複数同時に開けるアコーディオンの基本構造

まずは、一つずつ独立して開閉できるアコーディオンを見てみましょう。この状態では、開いた項目は閉じなくても次を開けます。

これは、data-bs-parentを使っていない状態です。それぞれがバラバラに動くイメージです。


<div class="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#item1">
                メニュー1
            </button>
        </h2>
        <div id="item1" class="accordion-collapse collapse">
            <div class="accordion-body">
                内容1
            </div>
        </div>
    </div>
</div>

ブラウザ表示

3. data-bs-parentを指定すると何が変わるのか

data-bs-parentを指定すると、「同じ親を持つCollapseは1つだけ開く」というルールが生まれます。

これは、本棚の引き出しに例えると分かりやすいです。一つの引き出しを開くと、他の引き出しは自動で閉まる仕組みです。

この指定があることで、アコーディオンらしい動きになります。


<div class="accordion" id="accordionSample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#a1">
                質問1
            </button>
        </h2>
        <div id="a1" class="accordion-collapse collapse" data-bs-parent="#accordionSample">
            <div class="accordion-body">
                回答1
            </div>
        </div>
    </div>
</div>

ブラウザ表示

4. 複数同時に開く場合の正しい考え方

複数同時に開きたい場合は、data-bs-parentを付けないことがポイントです。

初心者の方は「設定しないと動かないのでは？」と思いがちですが、Bootstrapは何も指定しなくても開閉はできます。

それぞれが自由に開くため、チェックリストや説明補足などに向いています。


<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#info">
    詳細を見る
</button>

<div id="info" class="collapse mt-2">
    <div class="card card-body">
        補足説明の内容
    </div>
</div>

ブラウザ表示

5. 1つだけ開きたいときの設定手順

1つだけ開く動きを作りたいときは、親となる要素にidを付け、そのidをdata-bs-parentで指定します。

ここでの親とは、見た目の親ではなく「グループの代表」という意味です。

全て同じ親を指定することで、Bootstrapが自動で制御してくれます。


<div class="accordion" id="menuGroup">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#m1">
                メニューA
            </button>
        </h2>
        <div id="m1" class="accordion-collapse collapse" data-bs-parent="#menuGroup">
            <div class="accordion-body">
                内容A
            </div>
        </div>
    </div>
</div>

ブラウザ表示