twitter-bootstrap-3 - Bootstrap 3 - 自动折叠井。如何...？

Question

对于某些人来说可能是一个简单的问题，但对我来说却很难弄明白。

我正在使用以下 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”，然后 B 的内容应该是可见的，而“按钮 A”下的内容应该被隐藏。

简而言之；按 B，显示 B 内容(并隐藏 A 内容)。

抱歉，如果我说得不对，请在这里尽我最大的英语努力。 :)

感谢您抽出时间提供解决方案。我能找到的例子只显示了我不想要的“ Accordion ”。所以，也许这甚至是不可能的。

Answer 1

您可以将它包装在一个 div 中并使用一些 jquery http://jsfiddle.net/2Dj7Y/2087/

<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')
})