當新的一個打開時，jquery切換不關閉行

Question

我在嘗試讓jquery在打開另一個表時關閉一個打開的行時出現問題。我試圖使用toggle（）無濟於事，我知道我只是缺少一些東西。這裏是我的html：

<table class="ProcTable" rules="all" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr class="proctablerow"> 
     <th>Recently Issued Procedures</th>   
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td></td> 
     <td>Admin</td> 
     <td>User Name #1</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td>Reader</td> 
     <td>User Name #2</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td>Reader</td> 
     <td>User Name #3</td> 
     </tr> 
     </tbody>  
</table> 
<table class="ProcTable" rules="all" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr class="proctablerow"> 
     <th>Recently Viewed Procedures</th>   
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td></td> 
     <td>Admin</td> 
     <td>User Name #1</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td>Reader</td> 
     <td>User Name #2</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td>Reader</td> 
     <td>User Name #3</td> 
     </tr> 
     </tbody>  
     </table> 
     <table class="ProcTable" rules="all" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr class="proctablerow"> 
     <th>Bookmarked Procedures</th>   
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td></td> 
     <td>Admin</td> 
     <td>User Name #1</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td>Reader</td> 
     <td>User Name #2</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td>Reader</td> 
     <td>User Name #3</td> 
     </tr> 
     </tbody>  
     </table> 

     </table> 

這裏是我的jQuery代碼：

$(document).ready(function() {  
    $("#accordion").accordion({ active: false, collapsible: true }); 
    $(".ProcTable").accordion({ active: false, collapsible: true, autoHeight: false }); 

    $('table.ProcTable tr.proctablerow th') .click(
    function() { 
     $(this) .parents('table.ProcTable') .children('tbody') .toggle(); 
    }); 

}); 

有人可以幫助我弄清楚如何關閉一排，同時打開另一行（手風琴式）。謝謝！

Answer 1

$('table.ProcTable tr.proctablerow th').on('click', function() { 
    var elm = $(this).parents('table.ProcTable').children('tbody'); 
    $('table.ProcTable').children('tbody').not(elm).hide(); 
    elm.toggle(); 
}); 

FIDDLE