Dj.Sunrise Dj.Sunrise - 12 days ago 9
Javascript Question

Twitter Bootstrap 3 collapse when checkbox checked

Accordion have to collapse on checked checkbox. And must be hidden when it's uncheked.

Here is code : http://jsfiddle.net/UwL5L/2/

Why it doesn't checks?

<div class="panel-group driving-license-settings" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<input type="checkbox" value=""> I have Driver License
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" value="">A
</div>
<div class="checkbox">
<input type="checkbox" value="">B
</div>
<div class="checkbox">
<input type="checkbox" value="">C
</div>
<div class="checkbox">
<input type="checkbox" value="">D
</div>
<div class="checkbox">
<input type="checkbox" value="">E
</div>
</div>
</div>
</div>
</div>
</div>

Answer

Fiddle : http://jsfiddle.net/h44PJ/

JS :

$('.collapse').collapse();

// Don't collapse on checkbox click
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e){
    e.stopPropagation();
})

// Cancel show event if not checked
$('#collapseOne').on('show.bs.collapse', function(e){
    if( ! $('.panel-heading h4 a input[type=checkbox]').is(':checked') )
    {
        return false;
    }
});

UPDATE :

$('.collapse').collapse();
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e){
    e.stopPropagation();
    $(this).parent().trigger('click');   // <---  HERE
})
$('#collapseOne').on('show.bs.collapse', function(e){
    if( ! $('.panel-heading h4 a input[type=checkbox]').is(':checked') )
    {
        return false;
    }
});