■折り畳み:collapse:JavaScript:複数の要素の表示と非表示とを切り替える
ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
<p>
<!-- ID「content-01」の切替ボタン -->
<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>
<!-- ID「content-02」の切替ボタン -->
<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>
<!-- クラス「contents」の切替ボタン -->
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target=".contents" aria-expanded="false" aria-controls="contents-01 contents-02">クラス「contents」を同時に表示切り替え</button>
</p>
<div class="row">
<div class="col">
<!-- ID「content-01」、クラス「contents」 -->
<div class="collapse contents" id="content-01">
<div class="card card-body">
ID「content-01」、クラス「contents」
</div>
</div>
</div>
<div class="col">
<!-- ID「content-02」、クラス「contents」 -->
<div class="collapse contents" id="content-02">
<div class="card card-body">
ID「content-02」、クラス「contents」
</div>
</div>
</div>
</div>