Question

I have a 2-level nested container (see below).

When I click anywhere inside the .summary , the details are revealed as they should be. When I check the checkbox, I do not want the details to be revealed. So I tried throwing in some globals vars to control the slideToggle(). It works in IE but not in Firefox.

Is there anyway to prevent the slideToggle() from executing whenever you check the box? It should execute at all other times.

* HTML *

<div class="summary">
    <div>Data 1</div>
    <div>Data 2</div>
    <div class="col_5"><input type="checkbox" /></div>
</div>
<div class="details">Detailed information</div>

* JavaScript *

$(document).ready(function(){

    var boxChecked = 'N';

    $('input:checkbox').change(function() {

        $(this).closest('div.col_5').html('Yes');

        boxChecked = 'Y';

    });

    $('.summary').click(function(e){

        if (boxChecked == 'N') $(this).next('.details').slideToggle('slow');

        boxChecked = 'N';

    });

});

It’s almost as though .click() takes execution precedence over .change() in Firefox.

Answer 1

How about, simply:

$(document).ready(function(){


    $('.summary').click(function(e){

        if ($("input:checked").length == 0) { 
          $(this).next('.details').slideToggle('slow');
        }
    });

});

Obviously you will need to fine tune your :checked selector to only target the check box that you want (if you will have more checkboxes on the page).