Jquery在c：foreach中展开/折叠

Question

我有一个有两列的表。对于第一列的单个值，第二列有多个值，因此使用+/-展开/折叠jquery功能。问题是jquery在第二列的foreach循环中没有工作。它正在为第一列工作，因为整个列表有单个+/-。 JSP：

    <div class="accordion_container">
    <table>
<tr><td>
            <div class="accordion_h">First Column<span class="plusminus1">+</span></div></td></tr>
<div class="accordion_b" style="display: none;">
<c:foreach var="first" items="firstmap">
<tr>
<td>

<c:out value="${first.value}">

</td>
<td>
<div class="accordion_body" style="display: none;">
<c:foreach var="sec" items="secmap">
<tr>
<td>
            <div class="accordion_head">SecondColumn<span class="plusminus">+</span></div></td>
<td>

<c:out value="${sec.value}">

</td>
</td>
</tr></c:foreach>
</div>

JS：

$(document).ready(function(){
    //toggle the component with class accordion_body
    $(".accordion_head").click(function(){
        if ($('.accordion_body').is(':visible')) {
            $(".accordion_body").slideUp(300);
            $(".plusminus").text('+');
        }
        if( $(this).next(".accordion_body").is(':visible')){
            $(this).next(".accordion_body").slideUp(300);
            $(this).children(".plusminus").text('+');
        }else {
            $(this).next(".accordion_body").slideDown(300); 
            $(this).children(".plusminus").text('-');
        }
    });
});

CSS：

.accordion_container {
    width: 500px;
}
.accordion_head {
    background-color:skyblue;
    color: white;
    cursor: pointer;
    font-family: arial;
    font-size: 14px;
    margin: 0 0 1px 0;
    padding: 7px 11px;
    font-weight: bold;
}
.accordion_body {
    background: lightgray;
}
.accordion_body p{
    padding: 18px 5px;
    margin: 0px;
}
.plusminus{
    float:right;
}