Bootstrap

Bootstrapでアコーディオン（Accordion）を作る方法

2022年6月14日 by single コメントはまだありません

Bootstrapでアコーディオン（Accordion）を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Accordion demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

  <div class="container">
    <div class="row">
      <h1>アコーディオン</h1>
      <div class="accordion" id="accordionExample">
        <!-- 第１項目 -->
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              アコーディオン項目 #1
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>第１項目の本文部。</strong> ここは第１項目の本文部になります。
          </div>
        </div>

        <!-- 第２項目 -->
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              アコーディオン項目 #2
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>第２項目の本文部。</strong> ここは第２項目の本文部になります。
            </div>
          </div>
        </div>
        <!-- 第３項目 -->
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              アコーディオン項目 #3
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>第３項目の本文部。</strong> ここは第３項目の本文部になります。
            </div>
          </div>
        </div>
      </div><!-- accordion -->
    </div><!-- row -->



    <div class="row bg-light" style="margin-top:20px;">
      <h1>アコーディオン(Flush)</h1>
      <div class="accordion accordion-flush " id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              アコーディオン項目 #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <strong>第１項目の本文部。</strong> ここは第１項目の本文部になります。
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              アコーディオン項目 #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <strong>第２項目の本文部。</strong> ここは第２項目の本文部になります。
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              アコーディオン項目 #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <strong>第３項目の本文部。</strong> ここは第３項目の本文部になります。
            </div>
          </div>
        </div>
      </div><!-- accordion -->
    </div><!-- row -->

    <div class="row" style="margin-top:20px;">
      <h1>アコーディオン(Always open)</h1>
      <div class="accordion" id="accordionPanelsStayOpenExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
              アコーディオン項目 #1
            </button>
          </h2>
          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
            <div class="accordion-body">
              <strong>第１項目の本文部。</strong> ここは第１項目の本文部になります。
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
              アコーディオン項目 #2
            </button>
          </h2>
          <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
            <div class="accordion-body">
              <strong>第２項目の本文部。</strong> ここは第２項目の本文部になります。
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
              アコーディオン項目 #3
            </button>
          </h2>
          <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
            <div class="accordion-body">
              <strong>第３項目の本文部。</strong> ここは第３項目の本文部になります。
            </div>
          </div>
        </div>
      </div><!-- accordion -->
    </div><!-- row -->
  </div><!-- container -->

  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

アコーディオン実装

アコーディオンブロック生成
<div class="accordion" id="accordionExample">
...
</div>

まず、最初にdivにCSSクラス「accordion」を指定するブロックを生成します。

アコーディオン項目生成

次にアコーディオンの各項目を生成していきます。

<div class="accordion" id="accordionExample">
 <div class="accordion-item">
   ...
 </div>
</div>

divタグにCSSクラス「accordion-item」を設定してください。

アコーディオン項目ヘッダ生成
<div class="accordion" id="accordionExample">
 <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        アコーディオン項目 #1
      </button>
    </h2>
    ...
 </div>
</div>

項目領域ができたら、そこにヘッダとボディを設定します。

まず、ヘッダです。サンプルではh2タグにCSSクラス「accordion-header」を設定しています。

h2タグでなくてもh1でもdivタグでも構いません。ブロック領域のオブジェクトを設定し「accordion-header」をCSSクラスに設定してください。

アコーディオン項目ボディ生成
<div class="accordion" id="accordionExample">
 <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        アコーディオン項目 #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>第１項目の本文部。</strong> ここは第１項目の本文部になります。
      </div>
    </div>
 </div>
</div>

アコーディオン項目ヘッダの下にボディ部を定義してください。

まず、div領域を設定しidを設定してください。このIDはヘッダで定義して「data-bs-target」属性の値と同じものにしてください。また、classには「accordion-collapse collapse」を設定してください。

まず、div領域を設定しidを設定してください。このIDはヘッダで定義して「data-bs-target」属性の値と同じものにしてください。また、classには「accordion-collapse collapse」を設定してください。さらに「data-bs-parent」属性にはアコーディオン領域の最上位のdiv領域のIDを指定してください。

初期表示でオープンさせるには？
<div class="accordion" id="accordionExample">

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse　" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        アコーディオン項目 #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>第１項目の本文部。</strong> ここは第１項目の本文部になります。
    </div>
  </div>
...
</div>

まず、ヘッダのbuttonオブジェクトのクラス「collapsed」クラスを削除してください。これで、初期選択っぽく項目がハイライトされた感じになります。見た目の問題です。

次に同じくbuttonの「aria-expanded」属性をtrueにしてください。

最後に、アコーディオン項目ボディ部のdiv領域のCSSクラスに「show」を設定してください。

これで、初期表示時に項目が表示された状態で表示されます。

他のスタイル

Flush

アコーディオンブロックの最上位のDIV領域にCSSクラス「accordion-flush」を追加すると丸みを帯びた角がないアコーディオンを生成することができます。

複数項目を同時に開くアコーディオンにするには？

Always open
<div class="accordion" id="accordionExample">
 <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        アコーディオン項目 #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>第１項目の本文部。</strong> ここは第１項目の本文部になります。
      </div>
    </div>
 </div>
 ...
</div>

アコーディオン項目のボディから「data-bs-parent」属性を削除すると、他のアコーディオン項目を選択しても、閉じず、開いたままになります。

ご参考

関連ページ