■折り畳み:collapse:JavaScript:表示と非表示が切り替わるコンテンツ
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
<div class="collapse">
表示と非表示が切り替わるコンテンツ
</div>
<script>
$('.toggle-btn').click(function(){
$('.collapse').collapse('toggle');
});
</script>
■折り畳み: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>
■折り畳み:collapse:JavaScript:アコーディオン折り畳みcollapse
a要素とhref属性によるボタン
a要素とhref属性
によるボタン
罫線なし、色なしでやれば、それっぽく見えるはず
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
<div class="row">
<div class="col-sm-6 mb-4">
<!-- a要素とhref属性による切替ボタン -->
<p>
<a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button" aria-expanded="false" aria-controls="collapseContent01">a要素とhref属性によるボタン</a>
<a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
a要素とhref属性<br>
によるボタン<br>
罫線なし、色なしでやれば、それっぽく見えるはず
</a>
</p>
<!-- 切り替えるターゲットとなるコンテンツ -->
<div class="collapse" id="collapseContent01">
<div class="card card-body">
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
<!-- button要素とdata-target属性による切替ボタン -->
<p>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapseContent02" aria-expanded="false" aria-controls="collapseContent02"> button要素とdata-target属性によるボタン</button>
</p>
<!-- 切り替える対象となるコンテンツ -->
<div class="collapse" id="collapseContent02">
<div class="card card-body">
button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
</div>