jQuery-使用slideToggle功能呈现多个div元素

在我的ASP MVC 3视图的索引页中,我有一个集合对象,它可能有多达50个左右的元素。为了保持用户的索引干净,我尝试使用jQuery .slideToggle 集合包含5个以上项目时的功能。

然而,我目前正在 $(document).ready 而且,因为我给了 <div> 相同名称的元素,当您单击其中一个时,它们都会展开或折叠。

我是jQuery的新手,所以我想知道实现这个目标的最佳方法是什么,如果这种方法是一种好的方法,如何只允许我点击了折叠/展开的项目。

这是jQuery代码

    $(document).ready(function () {
        $(".hidden").hide();
        $(".expand").click(function () {
            $(".hidden").slideToggle("slow");

            if ($(".expand").html() == "[+] Expand") {
                $(".expand").html("[-] Collapse");
            } else {
                $(".expand").html("[+] Expand");
            }
        });
    });

这是 <分区> 的。由于这是索引页,这些位于 foreach 循环,并因此对每个记录重复(因此每个记录都被赋予相同的名称)。

        @if (item.BankListAgentId.Count > 5)
        {
            <div class="expand">[+] Expand</div>
            <div class="hidden">
                @foreach (var thing in item.BankListAgentId)
                {
                    string value = thing.FixedOrVariable.Trim();
                    if (value.Equals("F"))
                    {
                        var agentId = thing.AgentId.Trim();
                        var link = ViewBag.Periscope + agentId;
                        <a href="@link" target="_blank">@thing.StateCode: @agentId</a>
                        <br />                     
                    }
                }                
            </div>
        }