btn btn-primary toggle-btn

  <button type="button" class="btn text-dark">btn-primary" aria-pressed="true" autocomplete="off" id="text-dark">toggle-btn">押してね</button>
  <script>
    // クリックされたら、ボタン名を変更する
    $("#text-dark">toggle-btn").on('click', function () {
      $(this).button('toggle').text('押したね');
    });
  </script>

  <p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
  <div class="collapse" id="sample2">
    表示と非表示が切り替わるコンテンツ
  </div>
  <script>
    // hide.bs.collapseはイベント
    $(function () {
      $('#sample2').on('hide.bs.collapse', function () {
        $('.toggle-btn').html('表示する');
      });
      $('#sample2').on('show.bs.collapse', function () {
        $('.toggle-btn').html('非表示にする');
      });
    });
  </script>

  <p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
  <div class="collapse2">
    表示と非表示が切り替わるコンテンツ
  </div>
  <script>
    $('.toggle-btn').click(function () {
      $('.collapse2').collapse();
    });
  </script>

  <p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
  <div class="collapse">
    表示と非表示が切り替わるコンテンツ
  </div>
  <!-- ボタンにイベントを設定して、切り替えるclassを指定して、toggleで切り替わる -->
  <script>
    $('.toggle-btn').click(function () {
      $('.collapse').collapse('toggle');
    });
  </script>