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?
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?
Share Improve this question asked Sep 25, 2012 at 16:40 Aaron RebaAaron Reba 7592 gold badges10 silver badges15 bronze badges 3- 2 Try adding this css: .accordion-heading a.accordion-toggle { display: inline-block; } – scumah Commented Sep 25, 2012 at 16:44
- Ah, thanks! I moved around my checkbox and now it's what I wanted. – Aaron Reba Commented Sep 25, 2012 at 16:56
- Could you please post some code. I can't get it work. – foobar Commented Nov 19, 2012 at 22:15
2 Answers
Reset to default 7The 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();
});
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; }