Bootstrap 3 - Auto collapse wells. How...? - twitter-bootstrap-3

Question

Probably a simple question for someone, but hard to figure out for me.
I am using the following 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>
Collapse works, however, they can be expanded both. This is not the result what I want. Both start collapsed (= good). I click on 'Button A' it expands, then I click 'Button B' then contents of B should be visible and contents under 'Button A' should be hidden.
So in short; press B, show B contents (and hide A contents).
Sorry if I don't make sense, trying to do my best at English here. :)
Thank you for your time and solutions. The examples I could find only showed this for the 'Accordion', which I don't want. So, maybe this is not even possible.

Answer 1

You can wrap it in a div and use a bit of 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')
})

Answer 2

Bootstrap uses the "collapse" and "collapse.in" classes to collapse and expand div's respectively.
You could create some javascript which is called on each button press and changes the classes to open and close the required div's using the following code.
<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>
Following this you would call the functions when a click event occurs
<button class="btn btn-primary" type="button" onclick"expandA()">Button A</button>
<button class="btn btn-primary" type="button" onclick"expandB()">Button B</button>