表を作成していて初期は隠し行ありの状態でその行をクリックすれば隠し行すべてが表示されるものを作成しております。
現状下記サイトを参考にして作成したのですが、１行しか開閉できません。（初期状態で残りの行も見えてしまう）
http://kachibito.net/snippets/expand-table-rows-using-jquery-html-and-css
複数行開閉する方法があれば教えて頂きたくお願いします。尚、理想の画面は次の通りです。
初期
初期画面（理想形）

第一次会員クリック後

<style type="text/css">
  #table_detail tr:hover{
 background-color:#ddd;
 cursor:pointer;
}
#table_detail .hidden_row{
 display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
 function show_hide_row( row ) { $( "#" + row ).toggle(); }
 </script>

<!DOCTYPE html>
<table border=1 id="table_detail" align=center cellpadding=10>


  <tr onclick="show_hide_row('hidden_row1');">
    <td colspan="4">第一次会員様</td>
  </tr>
  <tr id="hidden_row1" class="hidden_row">
    <th>名前</td><td>住所</td><td>電話番号</td><td>グループ</td>
  </tr>
  <tr id="hidden_row1" class="hidden_row"></tr>
    <td>山田太郎</td>
    <td>東京都</td>
    <td>03-34566-7777</td>
    <td>A</td>
  </tr>
  <tr id="hidden_row1" class="hidden_row"></tr>
  <td>宇田太郎</td>
  <td>東京都</td>
  <td>03-1111-7777</td>
  <td>A</td>
  </tr>
  <tr onclick="show_hide_row('hidden_row2');">
    <td colspan="4">第二次会員様</td>
  </tr>
  <tr id="hidden_row2" class="hidden_row">
    <th>名前</td><td>住所</td><td>電話番号</td><td>グループ</td>
  </tr>
</table>
</html>