Javascript 创建具有多个级别的手风琴表

我正在尝试创建一个包含多个标题的手风琴表，该表将展开以显示多个展开的子标题

到目前为止，我拥有的HTML：

<tbody>

<tr class="header">
  <th colspan="2">Header</th>
</tr>

<tr>
  <td>Sub-Header1</td>
  <td>sub-info</td>
  <td>sub-info</td>
  <td>sub-info</td>
</tr>
<tr>
  <td>Sub-Header2</td>
  <td>sub-info</td>
  <td>sub-info</td>
  <td>sub-info</td>
</tr>

</tbody>

<script>
$('.header').click(function(){
$(this).nextUntil('.header').slideToggle(100, function(){
    });
});
</script>

标题
副校长1
子信息
子信息
子信息
副校长2
子信息
子信息
子信息

以下是我到目前为止使用的Javascript：

<tbody>

<tr class="header">
  <th colspan="2">Header</th>
</tr>

<tr>
  <td>Sub-Header1</td>
  <td>sub-info</td>
  <td>sub-info</td>
  <td>sub-info</td>
</tr>
<tr>
  <td>Sub-Header2</td>
  <td>sub-info</td>
  <td>sub-info</td>
  <td>sub-info</td>
</tr>

</tbody>

<script>
$('.header').click(function(){
$(this).nextUntil('.header').slideToggle(100, function(){
    });
});
</script>

$（'.header'）。单击（函数（）{
$（this）.nextUntil（'.header'）.slideToggle（100，function（）{
});
});

到目前为止，一切似乎都正常工作，除了，如果我展开并折叠子标题，然后尝试折叠主标题，子标题会重新打开。我很确定这与javascript有关，但我不确定如何修复或继续

---

如果有人能帮我修改这个代码，或者给我一个新的方法来创建这个手风琴表，我将非常感激

您是希望完成这项工作，还是希望实现这一目标？
JSFiddle：

假设结构如下：

标题

分目1 img 一些文本 链接

分目2 img 一些文本 链接

单击副标题1时，信息隐藏或显示 单击副标题2时，信息隐藏或显示 单击标题时，信息隐藏或显示

HTML

---

哦，等等，我唯一的问题是，当扩展子标题时，如何获取信息。显示在子标题下方而不是侧面@Will有几种不同的方法可以做到这一点，即将子信息包装在div中是最明显的。问题：所有3个子信息是否总是一起显示？是的，在每个子标题下，子信息将是一张图片、一段文字和一些链接。那是我的子信息。每次展开子标题时都将一起显示@很抱歉，在你给我发送JSFIDLE之前，我已经发送了最后一条评论！这正是我所需要的，非常感谢！！！你真的帮了我大忙。我还有一个问题（很抱歉这么烦人，但我对javascript几乎一无所知），我如何获得子信息。从隐藏开始@威尔让我们。