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.

Read more