jQueryは複数の領域を個別に切り替える

Question

私はjQueryを使用して、トグルだけでサイトの領域を表示および非表示にしています。これはうまくいきますが、ページ上で個別に表示したり非表示にしたい要素が複数ある場合は、各項目に対してjQueryを少し書かなければなりません。カプセル化クラス内のクラスまたはIDに対してそれを行う方法はありますか？

HERESに私のjQuery：

jQuery('.collapse').click(function() { 


     jQuery('#filterArea').toggle('slow', function() { 

     }); 

    }); 

そしてHERESに私のコンテンツ：私はちょうどfilterAreaを閉じる崩壊のクラスにページ上のいくつかの領域を持つことができるようにしたい

<div class="tabs"> 
    <div class="ui-widget-header"> 
     <div class="collapse" id="boxId">Content Box</div> 

    </div><br /> 
     <div class="addPadLeftNoFloat" id="filterArea"> 

      <p>Content for box</p> 

     </div>    
</div> 

外側の崩壊の中で？または類似？私はこれを説明する素晴らしい仕事をしていない！ - 私は崩壊のクラスを持つ2つのdiv要素を持っている場合、私はそれらをクリックすると、代わりにidとしてfilterAreaを有するのでので、そのdiv要素のfilterareaトム

Answer 1

を崩壊、クラスに変更します。

jQuery('.collapse').click(function() { 
    jQuery('.filterArea').toggle('slow', function() { 

    }); 
}); 

A working example：

<div class="tabs"> 
    <div class="ui-widget-header"> 
     <div class="collapse" id="boxId">Content Box</div> 
    </div> 

    <br /> 
    <div class="addPadLeftNoFloat filterArea"> 
     <p>Content for box</p> 
    </div>    
</div> 

また、これにあなたのJavaScriptを変更します。

編集：あなただけ囲む.tab要素と.filterArea要素を折りたたむしたい場合には、JavaScriptのようなものを使用：

$('.collapse').click(function() { 
    $(this).closest('.tabs').find('.filterArea').toggle('slow'); 
}); 

Updated example。