Создание таблицы аккордеона с несколькими уровнями

Question

Я пытаюсь создать таблицу аккордеона с несколькими заголовками, которые расширяются, чтобы показать несколько расширяющихся заголовков.

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> 

Вот Javascript У меня до сих пор:

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

Все, кажется, работает до сих пор, КРОМЕ, если я разворачивать и сворачивать суб-заголовки, а затем попытаться свернуть главный заголовок, резервные заголовки открываются. Я почти уверен, что это как-то связано с javascript, но я не уверен, как это исправить или продолжить.

Если кто-нибудь может помочь мне исправить этот код или показать мне новый метод создания этой таблицы аккордеона, я был бы очень благодарен!

Answer 1

Будет что-то вроде этой работы, или это то, чего вы пытаетесь достичь?
JSFiddle: http://jsfiddle.net/biz79/d02rm189/1/

Предполагая следующую структуру:

Заголовок

Subheader1 IMG некоторый текст ссылка

Subheader2 IMG некоторый текст ссылка

При нажатии на subheader1, информация скрывает или показывает При нажатии на subheader2, информация скрывает или показывает При нажатии на заголовок, информация скрывает или показывает

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); 
});