Bootstrap: Collapse other sections when one is expanded

Question

I am making a Rails app, and am trying to achieve a particular functionality relating to Twitter\'s Bootstrap collapse. Bear with me as I explain it.

I currently hav

Answer 1

Using data-parent, first solution is to stick to the example selector architecture

     Keys  X
     Attributes
     Edit Details

    

        

            keys
        

        

            attrs
        

        

            edit
        
    

Demo (jsfiddle)

Second solution is to bind on the events and hide the other collapsible elements yourself.

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
    $myGroup.find('.collapse.in').collapse('hide');
});

Demo (jsfiddle)

PS: the strange effect in the demos is caused by the min-height set for the example, just ignore that.

---

Edit: changed the JS event from show to show.bs.collapse as specified in Bootstrap documentation.