We Blog Weblog

アコーディオンメニュー

Web

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>

中身のクラス名をcollapseID名を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>
  • テキスト1
  • テキスト1
  • テキスト1
  • テキスト2
  • テキスト2
  • テキスト2
  • テキスト3
  • テキスト3
  • テキスト3

 

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

  • テキスト1
  • テキスト1
  • テキスト1
  • テキスト2
  • テキスト2
  • テキスト2
  • テキスト3
  • テキスト3
  • テキスト3

 

最初から開いておく

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

<div class="collapse show" id="collapse1">
  • テキスト1
  • テキスト1
  • テキスト1
  • テキスト2
  • テキスト2
  • テキスト2
  • テキスト3
  • テキスト3
  • テキスト3

 

1つを開くと他が閉じる

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

<div class="collapse show" id="collapse1" aria-labelledby="heading1" data-parent="accordionExample">
  • テキスト1
  • テキスト1
  • テキスト1
  • テキスト2
  • テキスト2
  • テキスト2
  • テキスト3
  • テキスト3
  • テキスト3

 

まとめ

・collapseとcardを使う

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

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP