Bootstrap 3 - Auto collapse wells. How...? -
probably simple question someone, hard figure out me.
i using 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, can expanded both. not result want. both start collapsed (= good). click on 'button a' expands, click 'button b' contents of b should visible , contents under 'button a' should hidden.
so in short; press b, show b contents (and hide contents).
sorry if don't make sense, trying best @ english here. :)
thank time , solutions. examples find showed 'accordion', don't want. so, maybe not possible.
you can wrap in div , use 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') })
Comments
Post a Comment