■ボタン:button:コンポーネント:JavaScriptでボタンの動作 id指定 toggle-btn:js
<button type="button" class="btn btn-primary" aria-pressed="true" autocomplete="off" id="toggle-btn">押してね</button>
<script>
$("#toggle-btn").on('click', function() {
$(this).button('toggle').text('押したね');
});
</script>
■アコーディオン:accordion:JavaScript:折り畳みのJavaScript使用
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
<div class="collapse" id="sample2">
表示と非表示が切り替わるコンテンツ
</div>
<script>
$(function(){
$('#sample2').on('hide.bs.collapse', function(){
$('.toggle-btn').html('表示する');
});
$('#sample2').on('show.bs.collapse', function(){
$('.toggle-btn').html('非表示にする');
});
});
</script>
■アコーディオン:accordion:JavaScript:表示と非表示が切り替わるコンテンツ toggle-btn
表示と非表示が切り替わるコンテンツ
<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();
});
</script>
■折り畳み: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>