如何根据两次不同的按钮点击在两个不同的 div 部分折叠和折叠？

Question

我有两个按钮定义如下：

<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>

当我单击 'select' 按钮时，select div 被折叠。
之后，如果我单击 'add' 按钮，添加 div 会折叠到 select div 下方。

我希望一次只显示一个 div。如果单击 'select'，select div 应该折叠，之后如果用户单击 'add' div，select div 应该折叠并仅添加 div 以显示，反之亦然。

以上方法我都试过了，但是没有达到预期的效果。有什么办法可以实现我想要的行为吗？

谢谢！

Answer 1

只需将您的 div 部分包装在 .panel 中，然后在具有 id 的父容器中。然后将 id 作为 data-parent 属性添加到您的 divs

<div id="parent">
  <div class="panel">
    <div id="select" class="collapse" data-parent="#parent">
      Select your option
    </div>
  </div>
  <div class="panel">
    <div id="add" class="collapse panel" data-parent="#parent">
      Add your option
    </div>
  </div>
</div>

Fiddle - https://jsfiddle.net/dszc5q5r/

如何根据两次不同的按钮点击在两个不同的 div 部分折叠和折叠？

How to collapse and collapse in two different div sections based on two different button clicks?

twitter-bootstrap

collapse