Toggle effect problem when using for-loop in IE7
<p>I'm a webdesigner that's trying to get the hang of JavaScript and jQuery, and I want to learn how to write shorter, more concise code - to avoid being ridiculed by the developers at work ;)</p>

<p>I have this snippet:</p>

<pre><code>// toggle divs when checkbox is checked
$('.product-optional-checkbox1').click(function () {
    $('.product-optional-toggle1').toggle('fast');  
});

$('.product-optional-checkbox2').click(function () {
    $('.product-optional-toggle2').toggle('fast');  
});

$('.product-optional-checkbox3').click(function () {
    $('.product-optional-toggle3').toggle('fast');  
});

// hide divs
$('.product-optional-toggle1').hide(); 
$('.product-optional-toggle2').hide(); 
$('.product-optional-toggle3').hide();
</code></pre>

<p>...that I want to reduce using a for-loop, like this:</p>

<pre><code>for( var i = 1; i &lt; 4; ++i ) {
    $('.product-optional-checkbox' + i).click(function () {
        $(this).parent('div').find('div').toggle('fast');  
    });
    $('.product-optional-toggle' + i).css({ display: 'none'}); 
};
</code></pre>

<p>It works fine in FF, however in IE7 it toggles twice. Anyone know who to solve a problem like this?</p>
