「Bootstrap 4入門」.accordionでアコーディオン式のカードを表示するサンプル

2014年1月12日2020年12月31日

書式
.accordionでアコーディオン式のカードを表示
使用例

<div class="container">
  <h2>アコーディオンのサンプル</h2>
  <p><strong>sample:</strong><strong>data-parent</strong>アコーディオン</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Item 11
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          #1 AA　001
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Item 22
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          #2 BB 002
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Item 33
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          #3 CC 003
        </div>
      </div>
    </div>
  </div>
</div>