Bootstrap 3 - Automatic Collapse Wells. How...?
Probably a simple question for someone, but hard for me to understand.
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 as. This is not the result that I want. Both beginnings have collapsed (= good). I click on the "A" button, it expands, then I click on "Button B", then the content of B should be visible and the content under "Button A" should be hidden.
So, in short; press B, show content B (and hide content A).
Sorry if I don't make sense trying to do my best in English here. :)
Thanks for your time and solutions. The examples I could find showed this for "Accordion" only, which I don't want. So it might not even be possible.
source to share
You can wrap it in a div and use a little 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')
})
source to share
Bootstrap uses the "collapse" and "collapse.in" classes to collapse and expand divs, respectively.
You can create javascript that is called every time the button is clicked and changes the classes to open and close the required div 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>
After that you call functions when 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>
source to share