将元素属性与 javascript 折叠方法结合使用时，引导折叠无法正常工作

我正在使用Bootstrap手风琴创建一个分步过程，其中第一个手风琴中的用户有两个选项。如果选择第一个选项，则第一个手风琴应折叠，第二个手风琴应打开。如果选择第二个选项，则第一个选项应折叠，第三个选项应打开。为此，我为按钮和collapse方法使用 onclick 事件。

当前使用 Bootstrap 手风琴示例中的代码，如上面的链接所示。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <button id="btnOne" class="btn btn-default col-xs-12">
        First option
        </button>
        <button id="btnTwo" class="btn btn-default col-xs-12">
        Second option
        </button>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Second panel
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Third panel
      </div>
    </div>
  </div>
</div>

我为按钮添加了单击事件，如下所示，以显示和隐藏可折叠项。

$('#btnOne').on('click', function() {
    $('#collapseOne').collapse('hide');
    $('#collapseTwo').collapse('show');
});
$('#btnTwo').on('click', function() {
    $('#collapseOne').collapse('hide');
    $('#collapseThree').collapse('show');
});

现在问题来了：在单击任何按钮之前，默认的手风琴功能（通过使用html元素上的属性），（例如，单击一个手风琴的标题打开它并关闭其他手风琴），但是当使用javascript方法与使用这些属性的功能结合使用时，似乎存在问题。

例1：如果我打开第二个手风琴，没有按第一个手风琴中的按钮，然后打开第一个手风琴

按"第一个选项"按钮打开第二个手风琴，它没有打开。JavaScript $('#collapseTwo').collapse('show')似乎没有被触发。

示例 2：如果我直接单击第一个选项，则在页面加载后，第二个手风琴将正确打开。现在的问题是，当通过单击标题打开第一个手风琴时，它不会折叠第二个手风琴。

是否可以将 javascript 方法与 data-toggle="collapse" 和其他属性结合使用，并从两者的功能中受益？

或者，我是否需要手动（通过触发javascript方法）显示和折叠手风琴，以解决问题？

这里有一个小提琴可以尝试一下。

$('.collapse').on('show.bs.collapse', function () {
    $('#accordion').find('.collapse.in').collapse('hide');
});