jQuery Accordion Menu and Checkbox Issue

Question

So I have a simple jQuery accordion style menu with check boxes in the header part of the menu. This is to toggle a set of pins on a map depending on that category.

Here is the html:

<div id="mapMenu">
<ul id="accordion">
<li><div>
        <input type="checkbox" id="greenCheck" name="pinSet" value="Green"  class="pinToggles" onclick="pinSetCheck(greenSet)">Attractions
    </div>
    <ul>
        <li><a href="#">Outdoor Waterparks</a></li>
        <li><a href="#">Indoor Waterparks</a></li>
        <li><a href="#">Go-kart Track</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="redCheck" name="pinSet" value="Red" class="pinToggles" onclick="pinSetCheck(redSet)">Dining & Shopping
    </div>
    <ul>
        <li><a href="#">Restaurant 1</a></li>
        <li><a href="#">Restaurant 2</a></li>
        <li><a href="#">Restaurant 3</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="purpleCheck" name="pinSet" value="Purple"  class="pinToggles" onclick="pinSetCheck(purpleSet)">Groups & Meetings
    </div>
    <ul>
        <li><a href="#">Conference Room 1</a></li>
        <li><a href="#">Conference Room 2</a></li>
        <li><a href="#">Conference Room 3</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="orangeCheck" name="pinSet" value="Orange"  class="pinToggles" onclick="pinSetCheck(orangeSet)">Golf
    </div>
    <ul>
        <li><a href="#">Golf Course 1</a></li>
        <li><a href="#">Golf Course 2</a></li>
        <li><a href="#">Golf Course 3</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="darkBlueCheck" name="pinSet" value="Dark Blue"  class="pinToggles" onclick="pinSetCheck(darkBlueSet)">Spa</div>
    <ul>
        <li><a href="#">Spa 1</a></li>
        <li><a href="#">Spa 2</a></li>
        <li><a href="#">Spa 2</a></li>
    </ul>
</li>
</ul>
</div>

And the script:

$("#accordion li div").click(function(){
    $(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();

Here is the fiddle: http://jsfiddle.net/eBaKp/

If you check the box it activates the accordion for that category. I do not want this. I want it to stay unless they click on the rest of the that div.

Answer 1

I added this:

$(".pinToggles").click(function(event){
    event.stopPropagation();
});

Fiddle: http://jsfiddle.net/eBaKp/1/

---

Event.stopPropagation() prevents a click event (or other event, such as mouseover) from bubbling up to the parents, causing their events to fire.