Twitter bootstrap 3 引导3-自动折叠井。怎样。。。？

对某人来说可能是个简单的问题，但对我来说很难理解

我正在使用以下html：

                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#waarom" aria-expanded="false" aria-controls="waarom">Button A</button>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#spelregels" aria-expanded="false" aria-controls="spelregels">Button B</button>

            <div class="collapse" id="waarom">
              <div class="well waarom">
                <p>Ipsum Lorem text (button A)</p>
              </div>
            </div>

            <div class="collapse" id="spelregels">
              <div class="well spelregels">
            <p>Ipsum Lorem (button B)</p>
              </div>
            </div>

按钮A
按钮B
Ipsum Lorem文本（按钮A）

Ipsum Lorem（按钮B）

但是，塌陷工程可以同时扩展。这不是我想要的结果。两个开始都很好。我点击“按钮A”它展开，然后点击“按钮B”，B的内容应该可见，“按钮A”下的内容应该隐藏

简言之；按B键，显示B内容（和隐藏A内容）

对不起，如果我说不通的话，请在这里尽力学好英语。：）

感谢您的时间和解决方案。我能找到的例子只显示了“手风琴”的这一点，这是我不想要的。因此，这可能是不可能的。

引导程序使用“collapse”和“collapse.in”类分别折叠和扩展div

您可以创建一些javascript，在每次按下按钮时调用它，并使用以下代码更改类以打开和关闭所需的div

<script>
function expandA(){
document.getElementById("waarom").className = "collapse.in"; //Open A
document.getElementById("spelregels").className = "collapse"; //Close B
}

function expandB(){
document.getElementById("waarom").className = "collapse"; //Close A
document.getElementById("spelregels").className = "collapse.in"; //Open B
}
</script>

函数expandA（）{
document.getElementById（“waarom”）.className=“collapse.in”；//打开
document.getElementById（“spelregels”）.className=“collapse”//关闭B
}
函数expandB（）{
document.getElementById（“waarom”）.className=“collapse”//关闭
document.getElementById（“spelregels”）.className=“collapse.in”；//打开B
}

接下来，您将在单击事件发生时调用函数

<button class="btn btn-primary" type="button" onclick"expandA()">Button A</button>
<button class="btn btn-primary" type="button" onclick"expandB()">Button B</button>

按钮A
按钮B

您可以将其包装在一个div中，并使用一点jquery

按钮A
按钮B
Ipsum Lorem文本（按钮A）

Ipsum Lorem（按钮B）

$（'.collapse well'）.on（'show.bs.collapse'，函数（）{
$（这个）。最近的（#手风琴）
.find（“.collapse.in”）
.不是（这个）
.collapse（'切换'）
})

非常详细和有用的信息，我可以理解。非常感谢。我只是重新命名了“accordion”ID，因为我在页面的其他地方使用了它。但它工作得很好。泰。

<div id="accordion">
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#waarom" aria-expanded="false" aria-controls="waarom">Button A</button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#spelregels" aria-expanded="false" aria-controls="spelregels">Button B</button>

    <div class="collapse collapse-well" id="waarom">
        <div class="well waarom">
            <p>Ipsum Lorem text (button A)</p>
        </div>
    </div>

    <div class="collapse collapse-well" id="spelregels">
        <div class="well spelregels">
            <p>Ipsum Lorem (button B)</p>
        </div>
    </div>
</div>


$('.collapse-well').on('show.bs.collapse', function () {
    $(this).closest("#accordion")
        .find(".collapse.in")
        .not(this)
        .collapse('toggle')
})