アコーディオンメニュー

2022年10月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「アコーディオンメニュー」について書きます。

参考：Bootstrap4.2日本語リファレンス｜Collapse

アコーディオンメニューとは

項目をクリックすることで隠れている詳細を表示させることができるメニューのことです。クリックするたびに楽器のアコーディオンのように開いたり閉じたりするのでアコーディオンメニューと呼ばれます。

collapse

Bootstrapのcollapseという機能を使います。

まずはボタンを設置します。

<button type="button" class="btn">ボタン</button>

ボタンにdata-toggle="collapse" aria-expanded="false"と記述します。

<button type="button" class="btn" data-toggle="collapse" aria-expanded="false">ボタン</button>

次に隠しておく中身を記述します。

<button type="button" class="btn" data-toggle="collapse" aria-expanded="false">ボタン</button>

<div>
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</div>

中身のクラス名をcollapse、ID名をcollapse〇〇とします。

今回は仮にcollapse1としておきます。

<button type="button" class="btn" data-toggle="collapse" aria-expanded="false">ボタン</button>

<div class="collapse" id="collapse1">
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</div>

ボタンにdata-target="#collapse1" aria-controls="collapse1"と記述します。

<button type="button" class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">ボタン</button>

<div class="collapse" id="collapse1">
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</div>

ボタンの代わりに<a>タグを使うこともできます。その場合はtype="button"をrole="button"、data-target="#collapse〇〇"をhref="#collapse〇〇"に変更します。

<a role="button" class="btn" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">aタグ</a>

<div class="collapse" id="collapse1">
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</div>

cardを使ってアコーディオン

Bootstrapのcardを使ってみましょう。

まずはcardの基本の型を記述します。

<div class="card">

  <div class="card-header"></div>
  
  <div class="card-body"></div>

</div>

card-headerの中にさっきのボタンを設置します。

card-headerに適当にIDを付与しておきます。

<div class="card">

  <div class="card-header" id="heading1"><button type="button" class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">ボタン</button></div>
  
  <div class="card-body"></div>

</div>

card-bodyをさらにdivで囲んで、クラス名をcollapse、ID名をcollapse〇〇とします。

<div class="card">

  <div class="card-header" id="heading1">
    <button type="button" class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">ボタン</button>
  </div>
  
  <div class="collapse" id="collapse1">
    <div class="card-body"></div>
  </div>
  
</div>

card-bodyの中に中身を記述します。

<div class="card">

  <div class="card-header" id="heading1">
    <button type="button" class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">ボタン</button>
  </div>
  
  <div class="collapse" id="collapse1">
    <div class="card-body">
      <ul>
        <li>テキスト</li>
        <li>テキスト</li>
        <li>テキスト</li>
      </ul>
    </div>
  </div>
  
</div>

これと同じものをいくつか作って、まとめて<div>で囲んでクラス名をaccordionとします。IDも適当に付与しておきます。

<div class="accordion" id="accordionExample">
  
  <div class="card">
    <div class="card-header" id="heading1">
      <button type="button" class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">ボタン1</button>
    </div>
    <div class="collapse" id="collapse1">
      <div class="card-body">
        <ul>
          <li>テキスト1</li>
          <li>テキスト1</li>
          <li>テキスト1</li>
        </ul>
      </div>
    </div>  
  </div>
  
  <div class="card">
    <div class="card-header" id="heading2">
      <button type="button" class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">ボタン2</button>
    </div>
    <div class="collapse" id="collapse2">
      <div class="card-body">
        <ul>
          <li>テキスト2</li>
          <li>テキスト2</li>
          <li>テキスト2</li>
        </ul>
      </div>
    </div>  
  </div>
  
  <div class="card">
    <div class="card-header" id="heading3">
      <button type="button" class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">ボタン3</button>
    </div>

    <div class="collapse" id="collapse3">
      <div class="card-body">
        <ul>
          <li>テキスト3</li>
          <li>テキスト3</li>
          <li>テキスト3</li>
        </ul>
      </div>
    </div>  
  </div>

</div>

ボタンの代わりに<a>タグにして、d-blockというクラスを付与するとクリック可能な範囲が横幅いっぱいに広がるのでこっちの方がいいかもです。

最初から開いておく

collapseにshowというクラスを追加すると、最初から開いた状態にできます。

<div class="collapse show" id="collapse1">

1つを開くと他が閉じる

それぞれのcollapseの部分にaria-labelledby="card-headerのID"、data-parent="accordion全体のID"と記述します。

<div class="collapse show" id="collapse1" aria-labelledby="heading1" data-parent="accordionExample">

まとめ

・collapseとcardを使う

・最初から表示させたい時はcollapseとshow

・1つを開くと他が閉じるようにするにはaria-labelledbyとdata-parent

aタグのcollapseが最初ぜんぜん動かなくて、いつも使っているスムーススクロールとかトップに戻る矢印が原因だったみたいなのでちょっとコードを書き換えました。