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

Question

I'm trying to create an accordion table with multiple headers that expand to reveal multiple expanding sub-headers.

The HTML I have so far:

<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>

Here is the Javascript I have so far:

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

Everything seems to be working so far, EXCEPT, if I expand and collapse the sub-headers and then try to collapse the main header, the sub-headers open back up. I'm pretty sure it has something to do with the javascript, but I am unsure how to fix this or proceed.

If anyone can help me fix this code, or show me a new method to creating this accordion table, I would be very appreciative!

Answer 1

Would something like this work, or is this what you are trying to achieve?
JSFiddle: http://jsfiddle.net/biz79/d02rm189/1/

Assuming the following structure:

Header

Subheader1 img some text link

Subheader2 img some text link

When you click on subheader1, the info hides or shows When you click on subheader2, the info hides or shows When you click on Header, the info hides or shows

HTML

<table>
<tbody>

<tr class='mainheader'>
    <th>Header</th>
</tr>

<tr>
  <td class="header">Sub-Header1
    <div class="hideMe">

      <img alt ="yellowpic"  src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/yellow.png">
        <p>sub-info blah blah<p>
        <a>sub-info link</a>

    </div></td>
</tr>

<tr>
  <td class="header">Sub-Header2
  <div class="hideMe">
    sub-info<br>
    sub-info<br>
    sub-info
  </div></td>
</tr>

</tbody>
</table>

JS:

$('.mainheader').on("click", function(){
  $(this).siblings()
         .slideToggle(100);
});

$('.header').on("click", function(){
  $(this).find('.hideMe')
         .slideToggle(100);
});