我有两个按钮定义如下：

<button href="#select" class="btn btn-default" data-toggle="collapse">
       Select
</button>

<button href="#add" class="btn btn-default" data-toggle="collapse">
       Add
</button>

我有两个不同的div部分，定义如下：

<div id="select" class="collapse">
       Select your option
</div>

<div id="add" class="collapse">
        Add your option
</div>

当我单击'选择'按钮时，选择的div被折叠。
之后，如果我单击“添加”按钮，添加的div就折叠在选择的div下面。
我希望一次只显示一个div。如果单击“选择”，选择的div应该折叠，然后如果用户单击“添加”div，选择的div应该折叠，只添加要显示的div，反之亦然。
我试过以上的方法，但是我没有达到预期的结果。有没有什么方法可以达到我想要的行为？
谢谢你！