Question

$('.selector').click(function() {
    $(this).children('.drop_down_label').animate({ height: 'toggle' });
 });

I have a div ‘.drop_down_label’ that contains check boxes, when I animate the div like so it’s working ok

but if i check some check box it’s animate back.

How can i avoid this?

My goal is click–>animate ‘.drop_down_label’ –> check some check boxes–>then when clicking on any element in the page

cause the ‘.drop_down_label’ to animate back.

Answer 1

The way HTML events work is that they bubble up. Clicking on a checkbox inside a div will trigger the div’s click event too.

Attach a click handler to the checkboxes that does the following:

$("input[type=checkbox]", ".selector").click(function(e){
    e.stopPropagation();
});

for the second half of clicking any element on the page (though I think you mean any element outside the .selector div), this should work (untested).

$('.selector').click(function() {
    $(this).children('.drop_down_label').animate({ height: 'toggle' });
    $(document).one('click', function(e) {
        $(this).children('.drop_down_label').animate({ height: 'toggle' });
    })
})