Twitter Bootstrap - Excluding element from Accordion Collapse

Question

I have an accordion that I'd like to collapse a panel upon clicking anywhere in the header, as opposed to the title triggering the collapse. But I have a checkbox in the header that has it's own purpose, it'll select all of the elements that are in the panel that just opened. The way I have it set up now, clicking on the checkbox will trigger the panel collapse. Is there a way to set the panel to toggle on clicking anywhere in the heading, but specifically excluding a click on the checkbox?

 <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="collapse" href="#group-title">
                          <h4 class="panel-title">
                            <input type="checkbox" name="group-title" class="group-checkbox"> <a data-toggle="collapse" href="#group-title">
                              charity-group-title
                            </a>
                          </h4>
                        </div>
                        <div id="group-title" class="panel-collapse collapse">
                          <div class="panel-body">
                            <div class="row-fluid">

                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 group-title-orgs">
                                    <input type="checkbox" name="charity-id" class="flatten link group-title"> <div data-toggle="collapse" data-target="#org-id" class="flatten link">
                                              org-id-name
                                            </div>

                                            <div id="org-id" class="collapse">org-id-info</div>
                                        </div>

                                    </div>
                          </div>
                        </div>
                      </div>

Is there something to do with stopPropagation from jquery?

Edit: I've tried to call the jQuery .click() method and remove the data-toggle attribute from the checkbox, but that didn't work either.

Bootstrap fiddle: http://www.bootply.com/PyzEBFPfBN

Basemm Basemm · Accepted Answer · 2014-10-02T02:40:42

You should use stop propagation like

$('.panel-title input[type="checkbox"]').click( function (e) {
    e.stopPropagation()
});

But that's not really a good user experience it's confusing. I suggest you add arrow "->" that the user click on to open the accordion & when clicking either the title or the checkbox the checkbox will be toggled

Twitter Bootstrap - Excluding element from Accordion Collapse

1 Answers