Search code examples
javascriptjquerytwitter-bootstraptwitter-bootstrap-3jquery-ui-accordion

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>

Solution

  • UPDATE : There is a Better Answer Below ... Here -> *


    JS (Fiddle: http://jsfiddle.net/h44PJ/):

    $('.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 (Fiddle: http://jsfiddle.net/h44PJ/567/):

    $('.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;
        }
    });