contents
html bootstrap5 Sample
複数の要素の表示と非表示とを切り替:data-target
ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
<!-- 切替ボタン、data-targetで切り替え先を指定する -->
<p>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-01"
aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-02"
aria-expanded="false" aria-controls="content-02">ID「content-02」</button>
</p>
<!-- 切り替え先は、IDで指定する「content-01」、クラス「contents」 -->
<div class="row">
<div class="col">
<div class="collapse contents" id="content-01">
<div class="card card-body">
ID「content-01」、クラス「contents」
</div>
</div>
</div>
<div class="col">
<div class="collapse contents" id="content-02">
<div class="card card-body">
ID「content-02」、クラス「contents」
</div>
</div>
</div>
</div>