Having a clickable element in a Bootstrap accordion header

Question

I'm trying to use an accordion and have a checkbox inside of a header. However, when I click a checkbox in an accordion header, it collapses or expands the accordion. Is there a way to click the checkbox without the accordion expanding/collapsing?

Answer 1

The click bubbles up to the accordion header, so another possibility (besides moving the checkbox outside the toggle as suggested by others) is to stop the bubbling.

Use some JQuery like:

$("input[type=checkbox]").on("click", function(event) {
    event.stopPropagation();
});

or with a shorter checkbox selector:

$(":checkbox").on("click", function(event) {
    event.stopPropagation();
});

Answer 2

You have to place the checkbox outside the accordion-toggle but inside the accordion-heading class, i.e.,

<div class="accordion-heading">
    <input type="checkbox" name="box"/>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseone">
        <p>Heading1</p>
    </a>
</div>

and add the css .accordion-heading a.accordion-toggle { display: inline-block; }