Comment fermer l'accordéon précédent en cliquant sur le suivant

Question

Pour une raison quelconque, mes précédents accordéons ne se ferment pas automatiquement lorsque vous cliquez sur l'élément suivant. Je pensais que cela a été fait par défaut.

Voici mon HTML:

<div class="container top-section"> 
<div class="row"> 
    <div class="col-md-8"> 
     <div class="col-md-9 homewelcome"> 
     <div id="accordian"> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
    contentone 
</div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
    contenttwo 
</div> 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
    contentthree 
</div> 
     </div> 
     </div> 

    <div class="col-md-3 remove-padding"> 
     <ul class="reset-list colour-options"> 
      <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion" title="Young Carer"><li class="blue first-blue">Young Carer</li></a> 
      <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion" title="What we do"><li class="pink first-pink">What we do</li></a> 
      <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion" title="Info for families"><li class="blue blue-second">Info for<br>families</li></a> 
      <a href="/" title="Info for professionals" data-toggle="collapse" data-parent="#accordion"><li class="pink pink-second">Info for<br>professionals</li></a> 
     </ul> 
    </div> 
</div> 

Answer 1

Il ne se fait pas par défaut, mais la liaison à l'événement effondrement et cacher le reste des éléments pliables en utilisant jQuery fera l'affaire. Voir Boostrap javascript docs

var $topSection = $('.top-section'); 
$topSection.on('show.bs.collapse','.collapse', function() { 
    $topSection.find('.collapse.in').collapse('hide'); 
}); 

Bootply
http://www.bootply.com/Kg6K0W7rJg