如何在bootstrap accordian的标题上添加按钮，这样点击它就不会折叠或展开它？

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">
        <button class="btn btn-link no-collapse-btn" data-toggle="collapse" data-target="#collapseOne">
          Section 1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Content for section 1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">
        <button class="btn btn-link no-collapse-btn" data-toggle="collapse" data-target="#collapseTwo">
          Section 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Content for section 2
      </div>
    </div>
  </div>
</div>

$('.no-collapse-btn').click(function(e) {
  e.stopPropagation();
});