「Bootstrap 4入門」.accordionでアコーディオン式のカードを表示するサンプル
書式
.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>