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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -