CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Aaron Reba
Aaron Reba

Reputation: 759

Having a clickable element in a Bootstrap accordion header

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?

Upvotes: 8

Views: 9890

Answers (2)

Moolie
Moolie

Reputation: 569

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

Upvotes: 7

Raghavendra Karunanidhi
Raghavendra Karunanidhi

Reputation: 69

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; }

Upvotes: 6

Related Questions