js number +1 problem
<p>I need click <code>div.toggle1</code>,control slideup, slidedown the <code>div#text1</code>,</p>

<p>click <code>div.toggle7</code>,control slideup, slidedown the <code>div#text7</code>.</p>

<p>here is my code, also in <a href="http://jsfiddle.net/qHY8K/" rel="nofollow">http://jsfiddle.net/qHY8K/</a>  my <code>number +1</code> not work, need a help. thanks.</p>

<p>html</p>

<pre><code>&lt;div class="toggle1"&gt;click&lt;/div&gt;
&lt;div id="text1"&gt;text1&lt;/div&gt;
&lt;div class="toggle7"&gt;click&lt;/div&gt;
&lt;div id="text7"&gt;text2&lt;/div&gt;
</code></pre>

<p>js code</p>

<pre><code>jQuery(document).ready(function() {
counter = 0;
    for(i=1;i&lt;11;i++){
        (function(i){
            counter = counter +1;
            $('.toggle'+counter).toggle(function(){
                $('#text'+counter).css('display','none');
            },
            function() {
                $('#text'+counter).css('display','block');
            });
        })(i);
    };  
});
</code></pre>
