JQuery; toggle hide show effects all! How to prevent?

With my 'add a box' button, a box is added. With append! you append some elements to the box (.togglecontainer) to be exact With the show more/show les button i want the whole togglecontainer 开发者_开发知识库beneath that button, to toggle hide and show.

I understand why all containers with that classname start to toggle, but i only want the container beneath its togglebutton to toggle.

I tried this code wich didn't work properly;

$('.togglebtn').toggle(function() {
    $('.togglecontainer').hide();       
    $(this).html('Show less');
}, function() {
    $('.togglecontainer').show();
    $(this).html('Show more');
});

Can anyone explain me and help me how to make that work? Thanks in advance!

Here is my code; http://jsfiddle.net/2LTd9/

You need a scope selector. Try this:

$('.togglebtn').toggle( function() {              
 $('.togglecontainer', this).hide();                     
 var txt = $(this).html();
 $(this).html((txt=='Show less')?'Show more':'Show less');      
});

EDIT: Updated the code as per OP's inputs @ jsfiddle.

Updated the code and posted @ http://jsfiddle.net/Chandu/PtwWD/2/ Check it and let me know if this is what you want.

toggle() does not accept two callback functions.

Have a read of the jQuery docs for more information on how to use toggle.