Javascript jQuery分别切换多个区域

我使用jQuery来显示和隐藏我的站点上的区域，只需一个切换。这很好，但是如果我想在页面上单独显示和隐藏多个元素，我必须为每个项目编写一点jQuery。是否有一种方法可以在封装类中为类或ID执行此操作

以下是我的jQuery：

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


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

        });

    });

以下是我的内容：

<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>

内容框


盒子的内容

我想在页面上有一些折叠类的区域，这些区域仅仅关闭外部折叠中的过滤器区域？还是类似的？我解释得不是很好因此，如果我有两个div的类为collapse，当我单击它们时，该div的filterarea将崩溃

---

Tom

将

filterArea

作为

id

更改为类

<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>

编辑：如果您只想用封闭的

.tab

元素折叠

.filterArea

元素，请使用如下JavaScript：

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

---

.

非常感谢，（我会接受10分钟后的回答，如果允许的话）#我刚刚意识到，这样做会关闭该页面上的所有过滤区域it@TomBeech：没问题：）为了清晰起见，我更新了答案，并添加了一个工作示例。@TomBeech:您是否只想在给定的div中折叠

filterArea

s？e、 g.封闭的

.tabs

元素？@TomBeech：用另一种可能的解决方案更新了答案。

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