JQuery;ショーエフェクトをすべて非表示に切り替えます！どのように防止する？

Question

私の「ボックスを追加」ボタンでは、ボックスが追加されます。 追加！あなたはボックス（.togglecontainer）にいくつかの要素を正確に追加します もっと見る/表示するレボタンで私は の下のトグルコンテナ全体を隠して表示します。

私は、そのクラス名を持つすべてのコンテナがトグルを開始する理由を理解していますが、トグルボタンの下にあるコンテナだけを切り替える必要があります。

このコードは正しく動作しませんでした。

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

誰でも私に説明し、その作業を行う方法を手伝ってもらえますか？ ありがとうございます！

ここは私のコードです。 http://jsfiddle.net/2LTd9/

Answer 1

スコープセレクタが必要です。

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

EDIT：jsfiddle @ OPの入力ごとにコードを更新 これを試してみてください。

コードを更新し、@http://jsfiddle.net/Chandu/PtwWD/2/ を投稿してください。これが正しいかどうかを確認してください。

Answer 2

toggle()は、2つのコールバック関数を受け入れません。

トグルを使用する方法の詳細については、jQuery docsをお読みください。