Question

I need click div.toggle1,control slideup, slidedown the div#text1,

click div.toggle7,control slideup, slidedown the div#text7.

here is my code, also in http://jsfiddle.net/qHY8K/ my number +1 not work, need a help. thanks.

html

<div class="toggle1">click</div>
<div id="text1">text1</div>
<div class="toggle7">click</div>
<div id="text7">text2</div>

js code

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

Answer 1

Lets simplify things a bit. One of the nice things about jQuery is that you can apply an event handler to many elements all at the same time. Start by adding a common classname to all of your ‘toggle’ divs:

HTML

<div class="toggle toggle1">click</div>
<div id="text1">text1</div>
<div class="toggle toggle7">click</div>
<div id="text7">text2</div>

Now you can use just one selector to target all of those divs. The rest is just a matter of pulling out the numeric difference in each ‘toggle’ div’s classname:

JavaScript

jQuery(document).ready(function() {

    $('.toggle').toggle(off, on);

    function on() {
        var i = this.className.match(/[0-9]+/)[0];
        $('#text'+i).css('display','block');
    }

    function off() {
        var i = this.className.match(/[0-9]+/)[0];
        $('#text'+i).css('display','none');
    }
});

I’ve updated your jsFiddle project. Hopefully this works out for you: http://jsfiddle.net/ninjascript/qHY8K/3/