JQuery accordion with check box.

by mandel on February 16th, 2012

I have been playing around with jquery a little lately and I found that it is not very well documented how to add an input field like a checkbox inside the header of an accordion so that you can click on the header and the accordeon works as expected and the checkbox can be clicked. I’m not an expert in this things but I found the way to work around the issue:

The HTML:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="accordion">
    <div>
        <h3 id='example'>
            <a href='#'>
                <label>Title<input class='header-checkbox' type='checkbox' /></label>
            </a>
        </h3>
        <div>
            <p></p>
        </div>
    </div>
</div>

The Javascript:

$('#example').find('input').click(
    function(e){
        e.stopPropagation();
    }
);

I’m sure this is very easy for any advance js guy, but since I googled and did not find it I though I would be a nice guy and post it here for the next guy.

From Canonical

  • auser

    Just wanted to thank you for this piece of information — it would have taken me a while to figure this out otherwise!

  • prpetten

    Thanks, this is the exact snippet of code I was looking for.

  • Oscar

    Awesome! I was about to give up until I found your post.

    • Raj Patel

      Dear its not working for me

  • http://twitter.com/sxxyniknoit Lisa

    :| doesn’t seem to work for me… :( checkbox doesn’t click but accordion is functional