单选按钮和带有引导程序的多个折叠元素

Question

我遇到了与this question类似的问题，因为我需要按钮上的data-toggle选项来接受两个参数。

我正在用单选按钮折叠多张卡片。也就是说，我们有三种选择。选择一个选项时，所有打开的卡片都将合拢，而选定的卡片将不合拢。我还要选择的按钮保持选中状态。

<button href="#option1" class="btn btn-outline-primary" data-toggle="collapse">Option 1</button>
<button href="#option2" class="btn btn-outline-primary" data-toggle="collapse">Option 2</button>
<button href="#option3" class="btn btn-outline-primary" data-toggle="collapse">Option 3</button>

<div id="parent">
  <div id="option1" class="collapse panel" data-parent="#parent">
    <div class="card card-body">
      Details of option 1
    </div>
  </div>
  <div id="option2" class="collapse panel" data-parent="#parent">
    <div class="card card-body">
      Details of option 2
    </div>
  </div>
  <div id="option3" class="collapse panel" data-parent="#parent">
    <div class="card card-body">
      Details of option 3
    </div>
  </div>
</div>

麻烦的是，您只能为data-toggle指定一个选项，因此，当此时单击按钮时，它们不会进入活动状态，如果我可以指定类似{ {1}}

不幸的是，我对两个数据切换参数所做的所有搜索仅导致人们询问向按钮添加工具提示。引导程序中有什么方法可以更改按钮的状态，同时还可以使用它来折叠元素？